Js实现弹框

最新推荐文章于 2024-05-10 09:56:17 发布

珍妮的小罐君

最新推荐文章于 2024-05-10 09:56:17 发布

阅读量3.5k

点赞数 1

分类专栏： HTML CSS JavaScript 功能实现小集锦文章标签：弹框模态框对话框 js css

本文链接：https://blog.csdn.net/qq_36671474/article/details/55251771

版权

JavaScript 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

CSS

19 篇文章 1 订阅

订阅专栏

HTML

17 篇文章 0 订阅

订阅专栏

功能描述：

模态框（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>