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>
