【html/css】模态框的实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title>modaldemo</title> <style media= "screen" > #modal-overlay { visibility: hidden; position: absolute; /* 使用绝对定位或固定定位 */ left: 0px; top: 0px; width:100%; height:100%; text-align:center; z-index: 1000; background-color: #333; opacity: 0.5; /* 背景半透明 */ } /* 模态框样式 */ .modal-data{ width:300px; margin: 100px auto; background-color: #fff; border:1px solid #000; padding:15px; text-align:center; } </style> </head> <body style= "position: relative" > <div style= "width: 600px; height: 600px;" > <div id= "modal-overlay" > <div class = "modal-data" > <p>一个简单的模态框。</p> <p>点击 <a href= "#" onclick= "overlay()" >这里</a>关闭</p> </div> </div> </div> <a href= "#" onclick= "overlay()" >显示对话模态框</a> <script type= "text/javascript" > function overlay () { var e1 = document.getElementById( 'modal-overlay' ); e1.style.visibility = (e1.style.visibility == "visible" ) ? "hidden" : "visible" ; } </script> </body> </html> |
1 | 注意: #modal-overlay 一定要是相对body来设置绝对定位。若是不给body设置position,#modal-overlay 就是相对html设置了绝对定位,当html页面太高或者太宽而出现滚动条的时候,#modal-overlay 就没有覆盖整个页面的效果了。 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步