原生JS+CSS（CSS3）+HTML实现页面弹框

来源：互联网发布：localstorage存储数据编辑：程序博客网时间：2024/06/06 02:05

—–看了很多网上弹框的实现，有的只是讲了一点，有的又太复杂了，所以自己动手下了一个，几分钟的事情；就是调试样式比较慢而已；之前用过一些js或者css框架中的弹框，感觉很复杂；也看过源代码；是想机制大同小异；

以下是截图：
这里写图片描述

这里写图片描述

以下是代码：

 <!DOCTYPE html> <html> <head> <meta charset=""/> <title>opacity</title> <style> *{     padding: 0;     margin: 0;}body{    padding: 0px;    background: url() 0 0 no-repeat;    background-size: cover;}.demo{    width: 100%;    height: 100%;    position: relative;}.demo-bg{    position: absolute;    left: 0;    top: 0;    z-index: 0;    width: 100%;    height: 671px;    /*filter:Alpha(opacity=50);*/    background-color: rgba(0,0,0,0.4); /*实现透明背景*/    display: none;}#button{    width: 70px;    height: 30px;    border-radius: 5px;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    background: yellow;    margin: 20px 0 0 40px;    position: relative;    border: 0;    box-shadow:  2px 2px 10px red;    -webkit-box-shadow:  2px 2px 10px red;    -moz-box-shadow:  2px 2px 10px red;}.demo-txt{    position: relative;    z-index: 1;    color: #000;    background: white;    width: 30%;    height: 200px;    margin:auto;    padding: auto;    left: 0;    right: 0;    bottom: 0;    top: 0;    display: none;    padding: 10px;    border-radius: 5px;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;}#btn{    float: right;}</style></head><body>   <div class='demo'>    <button id="button" onclick="openDialog()">打开弹窗</button>    <div class='demo-bg'></div>    <div class='demo-txt'>        <button id="btn" onclick="closeDialog()">关闭弹窗</button>    </div></div><script>    var demobg = document.querySelector(".demo-bg");    var demotxt = document.querySelector(".demo-txt");    function openDialog() {        demotxt.style.display = "block";        demobg.style.display = "block";    }    function closeDialog() {        demotxt.style.display = "none";        demobg.style.display = "none";    }</script> </body></html>

2 0