This time I will bring you jQuery to implement the pop-up effect (with code). What are the precautions for jQuery to implement the pop-up effect? The following is a practical case, let’s take a look.
Here we use jquery to achieve two pop-up window effects:
1. Fade in pop-up window effect:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery弹窗</title> <style> *{padding: 0;margin: 0;} .box{width: 100%;height: 100%;} .main{width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);display: none;position: fixed;z-index: 1;} .mainbox{width: 800px;height: 100%;margin: 0 auto;background-color: rgba(255,255,255,0.8);padding: 20px;} .kkk{width: 100%;height: 1200px;background-color: red;} .close{color: red;cursor: pointer;} </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $(".btn").click(function(){ $(".main").fadeIn(); }); $(".close").click(function(){ $(".main").fadeOut(); }); }); </script> </head> <body> <p class="main"> <p class="mainbox"> <p class="close">点击关闭</p> </p> </p> <p class="box"> <p class="kkk"> <input class="btn" type="button" value="点击淡入弹窗" /> </p> </p> </body> </html>
Running effect:
2. Sliding pop-up window effect:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery弹窗</title> <style> *{padding: 0;margin: 0;} .box{width: 100%;height: 100%;} .main{width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);display: none;position: fixed;z-index: 1;} .mainbox{width: 800px;height: 100%;margin: 0 auto;background-color: rgba(255,255,255,0.8);padding: 20px;display: none;} .kkk{width: 100%;height: 1200px;background-color: red;} .close{color: red;cursor: pointer;} </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $(".btn").click(function(){ $(".main").fadeIn(); $(".mainbox").delay(500).slideDown(); }); $(".close").click(function(){ $(".main").fadeOut(); }); }); </script> </head> <body> <p class="main"> <p class="mainbox"> <p class="close">点击关闭</p> </p> </p> <p class="box"> <p class="kkk"> <input class="btn" type="button" value="点击淡入弹窗" /> </p> </p> </body> </html>
Running effect:
Believe it or not After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
##Detailed explanation of js imitation jquery steps
The above is the detailed content of jQuery implements pop-up effect (with code). For more information, please follow other related articles on the PHP Chinese website!