第二十七节 jQuery弹框练习 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
 7     <script type="text/javascript">
 8         $(function(){
 9             $('#btn').click(function(){
10                 $('.pop_con').show();
11 
12                 // 没有这个return会把这个点击事件传到上一级，会出现bug
13                 return false;
14             })
15 
16             $(document).click(function(){
17                 $('.pop_con').fadeOut();
18             })
19 
20             $('.pop').click(function(){
21                 return false;
22             })
23 
24             $('#close').click(function(){
25                 $('.pop_con').fadeOut();
26             })
27         });
28     </script>
29     <style type="text/css">
30         .pop_con{
31             display: none;
32         }
33         .pop{
34             position: fixed;
35             width: 500px;
36             height: 300px;
37             background-color: #fff;
38             border: 3px solid #000;
39 
40             left: 50%;
41             top: 50%;
42             margin-left: -250px;
43             margin-top: -150px;
44             z-index: 9999;
45         }
46 
47         .mask{
48             position: fixed;
49             width: 100%;
50             height: 100%;
51             background-color: #000;
52             opacity: 0.3;
53             filter: alpha(opacity=30); /* 兼容IE的写法 */
54             top: 0;
55             z-index: 9990;
56         }
57         .close{
58             float: right;
59             font-size: 30px;
60             font-style: normal;
61             text-decoration: none;
62             font-family: 'Microsoft Yahei';
63             text-height: 0;
64             
65 
66         }
67     </style>
68 </head>
69 <body>
70     <input type="button" name="弹出" id="btn" value="弹出">
71     <div class="pop_con">
72         <div class="pop">
73             投资金额：
74             <input type="text" name="" >
75             <a href="#" id="close" class="close">x</a>
76         </div>
77         <div class="mask"></div>
78     </div>
79 </body>
80 </html>

 

posted @ 2020-03-14 19:47  kog_maw  阅读(105)  评论(0)    收藏  举报