JavaScript 怎么实现一个模态框？

2023-03-10 09:12| 来源: 网络整理| 查看: 265

模态框（Modal）是现代 Web 应用程序中常用的用户界面元素，它可以在屏幕上方弹出一个模态窗口，阻止用户与背景交互，直到模态框被关闭。

创建 HTML 结构

在 HTML 文件中创建一个包含模态框的 HTML 结构，通常包括一个遮罩层和模态框本身。

模态框的内容在这里

添加 CSS 样式

使用 CSS 样式定义模态框和遮罩层的样式，以及控制模态框的显示和隐藏。

.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.4); /* 半透明黑色遮罩层 */ } .modal-content { background-color: #fefefe; margin: 15% auto; /* 让模态框居中 */ padding: 20px; border: 1px solid #888; width: 80%; /* 设置模态框的宽度 */ } .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }

使用 JavaScript 控制模态框的显示和隐藏

使用 JavaScript 监听模态框的触发事件，并控制模态框的显示和隐藏。

// 获取模态框元素 var modal = document.getElementById("myModal"); // 获取关闭按钮元素 var closeBtn = document.getElementsByClassName("close")[0]; // 当用户点击关闭按钮时，隐藏模态框 closeBtn.onclick = function() { modal.style.display = "none"; } // 当用户点击遮罩层时，隐藏模态框 window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } // 当用户点击触发按钮时，显示模态框 function showModal() { modal.style.display = "block"; }

触发按钮上绑定 showModal() 函数即可。

【本文地址】

公司简介

联系我们