js进阶 11-20 弹出层如何制作

最新推荐文章于 2022-10-20 13:38:14 发布

weixin_33924312

最新推荐文章于 2022-10-20 13:38:14 发布

阅读量120

点赞数

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>