This time I will bring you two methods to implement the pop-up window function. What are the precautions for implementing the pop-up window function? 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>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>
2. Sliding pop-up window Effect:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 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>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
cli Create a new webpack template project
How to call third-party libraries in Angular
The above is the detailed content of Two methods to implement pop-up window function. For more information, please follow other related articles on the PHP Chinese website!