共计 3566 个字符，预计需要花费 9 分钟才能阅读完成。
何为模态框
就是一个网页弹窗，这个弹窗你能够展现一句话、一段文字、图片、视频、音频都能够。反正就是一个点击一个中央弹出一个弹出层，你能够在这个弹出层展现你须要展现的内容、媒体。
设计
- 一个半透明度的 100% 宽高的遮罩层
- 一个模态框主体
- 顶部模态框加粗题目
- 内容区就是失常的文案
- 右上角敞开按钮
- 点击半透明度的遮罩层任意地位也是能够敞开的
- 关上模态框有从上往下的滑出动画
- 敞开模态框有从下往上的滑入动画
- 原生 JavaScript
- 易于扩大，须要应用的时候，能够依据模态框的 id 来管制关上不同的模态框
- 应用时，只有对 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">×</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">×</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">×</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
正文完
发表至： javascript
2023-06-24
