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

时间：2023-03-08 19:39:17

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

一、总结

一句话总结：其实就是一个div，控制显示和隐藏即可。设置成绝对定位更好，就可以控制弹出层出现的位置。关闭的画质需要将display重新设置为none就好。

二、弹出层

弹出层

案例描述：点击按钮之后自动弹出一个内容页面，点击内容页面上的关闭按钮后，页面关闭

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>阶段练习01</title>

     <script src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

         #box{

             width: 300px;

             height: 150px;

             display: none;

             border:solid green 1px;

         }

         #box h3{background: #ccc; margin-top: 2px;width: 300px;float: left;}

         #tit span{float: right;cursor: pointer;}

     </style>

 </head>

 <body>

     <input id="btn1" type="button" value="弹出层">

     <div id="box">

         <h3 id="tit">标题行<span id="close">关闭</span></h3>

         <p>内容略：.......</p>

     </div>

 <script>

     $(function(){

         $('#btn1').click(function(){

             $('#box').css('display','block')

         })

         $('#close').click(function(){

             $('#box').css('display','none')

         })

     })

 </script>

 </body>

 </html>

相关文章