Js实现弹框

来源：互联网发布：bootstrap 可视化编程编辑：程序博客网时间：2024/06/07 11:29

功能描述：

模态框（Modal Dialogue Box）也可叫做模态对话框，或者对话框，当一个模态框被打开时，用户可以与该对话框进行交互，点击关闭按钮可关闭该模态框！

功能实现：

1. 页面上有一个按钮，用于打开模态框，模态框默认隐藏；

2. 用户点击按钮，可打开模态框；用户点击模态框中的关闭或者点击页面其他地方可关闭该模态框

✦ 点击页面其他地方，关闭模态框，可用window.onclick事件
✦ 给关闭按钮绑定点击事件，按钮被点击，模态框Modal添加样式display：none;
✦ 给button按钮绑定点击事件，当按钮被点击时，模态框Modal添加样式display:block;
✦ 先获取页面上的button按钮，关闭按钮，以及模态框Modal

代码实现：

<html><head>    <style>        /* 弹窗 (background) */        .modal {            display: none; /* 默认隐藏 */            position: fixed;            z-index: 1;            padding-top: 100px;            left: 0;            top: 0;            width: 100%;            height: 100%;            overflow: auto;            background-color: rgb(0,0,0);            background-color: rgba(0,0,0,0.4);        }        /* 弹窗内容 */        .modal-content {            position: relative;            background-color: #fefefe;            margin: auto;            padding: 0;            border: 1px solid #888;            width: 35%;            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);            -webkit-animation-name: animatetop;            -webkit-animation-duration: 0.4s;            animation-name: animatetop;            animation-duration: 0.4s        }        /* 添加动画 */        @-webkit-keyframes animatetop {            from {top:-300px; opacity:0}            to {top:0; opacity:1}        }        @keyframes animatetop {            from {top:-300px; opacity:0}            to {top:0; opacity:1}        }        /* 关闭按钮 */        .close {            color: white;            float: right;            font-size: 28px;            font-weight: bold;        }        .close:hover,        .close:focus {            color: #000;            text-decoration: none;            cursor: pointer;        }        .modal-header {            padding: 2px 16px;            background-color: #5587A2;            color: white;        }        .modal-body {padding: 2px 16px;}        .modal-footer {            padding: 2px 16px;            background-color: #5587A2;            text-align: right;            color: white;        }    </style></head><body>    <!-- 打开弹窗按钮 -->    <button id="myBtn">打开弹窗</button>    <!-- 弹窗 -->    <div id="myModal" class="modal">        <!-- 弹窗内容 -->        <div class="modal-content">            <div class="modal-header">                <span class="close">×</span>                <h2>弹窗头部</h2>            </div>            <div class="modal-body">                <p>弹窗内容...</p>                <p>弹窗内容...</p>            </div>            <div class="modal-footer">                <h3>弹窗底部</h3>            </div>        </div>    </div>    <script>        // 获取弹窗        var modal = document.getElementById('myModal');        // 打开弹窗的按钮对象        var btn = document.getElementById("myBtn");        // 获取 <span> 元素，用于关闭弹窗 that closes the modal        var span = document.getElementsByClassName("close")[0];        // 点击按钮打开弹窗        btn.onclick = function() {            modal.style.display = "block";        }        // 点击 <span> (x), 关闭弹窗        span.onclick = function() {            modal.style.display = "none";        }        // 在用户点击其他地方时，关闭弹窗        window.onclick = function(event) {            if (event.target == modal) {                modal.style.display = "none";            }        }    </script></body></html>

0 0