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>