js进阶 11-20 弹出层如何制作
一、总结
一句话总结：其实就是一个div，控制显示和隐藏即可。设置成绝对定位更好，就可以控制弹出层出现的位置。关闭的画质需要将display重新设置为none就好。
二、弹出层
弹出层
案例描述：点击按钮之后自动弹出一个内容页面，点击内容页面上的关闭按钮后，页面关闭
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>阶段练习01</title> 6 <script src="jquery-3.1.1.min.js"></script> 7 <style type="text/css"> 8 #box{ 9 width: 300px; 10 height: 150px; 11 display: none; 12 border:solid green 1px; 13 } 14 #box h3{background: #ccc; margin-top: 2px;width: 300px;float: left;} 15 #tit span{float: right;cursor: pointer;} 16 </style> 17 </head> 18 <body> 19 <input id="btn1" type="button" value="弹出层"> 20 <div id="box"> 21 <h3 id="tit">标题行<span id="close">关闭</span></h3> 22 <p>内容略：.......</p> 23 </div> 24 <script> 25 $(function(){ 26 $('#btn1').click(function(){ 27 $('#box').css('display','block') 28 }) 29 $('#close').click(function(){ 30 $('#box').css('display','none') 31 }) 32 }) 33 </script> 34 </body> 35 </html>