何为模态框

就是一个网页弹窗，这个弹窗你能够展现一句话、一段文字、图片、视频、音频都能够。反正就是一个点击一个中央弹出一个弹出层，你能够在这个弹出层展现你须要展现的内容、媒体。

设计

  1. 一个半透明度的100%宽高的遮罩层
  2. 一个模态框主体
  3. 顶部模态框加粗题目
  4. 内容区就是失常的文案
  5. 右上角敞开按钮
  6. 点击半透明度的遮罩层任意地位也是能够敞开的
  7. 关上模态框有从上往下的滑出动画
  8. 敞开模态框有从下往上的滑入动画
  9. 原生JavaScript
  10. 易于扩大，须要应用的时候，能够依据模态框的id来管制关上不同的模态框
  11. 应用时，只有对div进行减少、批改即可，不须要批改css和JavaScript

代码

<!DOCTYPE html><html><head>    <title>原生JavaScript编写的模态框</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">    <style>        /*模态框主体款式*/        .modal {            display: none;            position: fixed;            z-index: 1;            left: 0;            top: 0;            width: 100%;            height: 100%;            overflow: auto;            background-color: rgba(0, 0, 0, 0.5);        }        /*模态框公共款式*/        .modal-content {            background-color: #fefefe;            margin: 50px auto 0;            padding: 20px;            border: 1px solid #888;            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);            animation: modal-show 0.3s;        }        /* 失常大小 */        .modal-normal {            width: 600px;        }        /* 中等大小 */        .modal-medium {            width: 400px;        }        /* 迷你大小 */        .modal-mini {            width: 250px;        }        /* 暗藏 */        .modal-hide {            animation: modal-hide 0.3s;        }        /* 展现动画 */        @keyframes modal-show {            from {                opacity: 0;                transform: translateY(-50px);            }            to {                opacity: 1;                transform: translateY(0);            }        }        /* 暗藏动画 */        @keyframes modal-hide {            from {                opacity: 1;                transform: translateY(0);            }            to {                opacity: 0;                transform: translateY(-50px);            }        }        /*敞开按钮*/        .close {            color: #aaa;            float: right;            font-size: 28px;            font-weight: bold;            cursor: pointer;            -webkit-tap-highlight-color: rgba(255,0,0,0);        }        /*敞开按钮的鼠标点击和通过款式*/        .close:hover,        .close:focus {            color: black;            text-decoration: none;            cursor: pointer;            -webkit-tap-highlight-color: rgba(255,0,0,0);        }    </style></head><body>    <h2>模态框</h2>    <button data-modal-action="open" data-modal-target="myModal">关上模态框</button>    <div id="myModal" class="modal">        <div class="modal-content modal-normal">            <span class="close">&times;</span>            <h3>模态框题目</h3>            <p>模态框文字、段落等内容。</p>        </div>    </div>    <script>        // 获取触发模态框的自定义属性        var modalButtons = document.querySelectorAll("[data-modal-action]");        // 获取模态框主体        var modals = document.querySelectorAll(".modal");        // 监听模态框的按钮事件        modalButtons.forEach(function(button) {            button.addEventListener("click", function() {                var targetId = this.dataset.modalTarget;                var targetModal = document.getElementById(targetId);                if (targetModal) {                    var action = this.dataset.modalAction;                    if (action === "open") {                        openModal(targetModal);                    } else if (action === "close") {                        closeModal(targetModal);                    }                }            });        });        // 关上模态框        function openModal(modal) {            modal.style.display = "block";            modal.querySelector(".modal-content").classList.remove("modal-hide");        }        // 敞开模态框        function closeModal(modal) {            modal.querySelector(".modal-content").classList.add("modal-hide");            modal.querySelector(".modal-content").addEventListener("animationend", function () {                modal.style.display = "none";            }, { once: true });        }        // 监听模态框的敞开时事件        modals.forEach(function(modal) {            var closeButton = modal.querySelector(".close");            if (closeButton) {                closeButton.addEventListener("click", function() {                    var targetModal = this.closest(".modal");                    closeModal(targetModal);                });            }        });        // 当用户点击模态框内部时，敞开模态框        window.onclick = function (event) {            modals.forEach(function(modal) {                if (event.target === modal) {                    closeModal(modal);                }            });        };    </script></body></html>

应用阐明

这个模态框的长处就是易使用，如果你一个页面有多个性能须要应用到模态框，你能够增加以下的组合来增加多个模态框。

<button data-modal-action="open" data-modal-target="myModal1">关上模态框1</button><div id="myModal1" class="modal">    <div class="modal-content modal-normal">        <span class="close">&times;</span>        <h3>模态框题目111</h3>        <p>模态框文字、段落等内容111。</p>    </div></div><button data-modal-action="open" data-modal-target="myModal2">关上模态框2</button><div id="myModal2" class="modal">    <div class="modal-content modal-normal">        <span class="close">&times;</span>        <h3>模态框题目222</h3>        <p>模态框文字、段落等内容222。</p>    </div></div>

即通过 data-modal-target="myModal2" 这个属性就能够管制对应id的模态框div。所以在一个页面上，无需再次批改JavaScript代码，只须要在一个须要点击关上模态框的标签内减少 data-modal-action="open" data-modal-target="myModal2" 且减少一个对应id与 data-modal-target 统一的即可。

作者

TANKING