在JavaScript中，模态框是一种常见的用户界面元素，用于显示对话框或其他信息，下面是一个简单的例子，展示了如何使用原生JavaScript创建一个模态框。
HTML 部分
我们需要在HTML文档中添加一个模态框的结构，这包括一个触发按钮、模态框的容器以及关闭按钮。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-触发按钮 -->
<button id="openModalBtn">打开模态框</button>
<!-模态框 -->
<div id="myModal" class="modal">
<!-模态框内容 -->
<div class="modal-content">
<span class="close">×</span>
<p>这是一个模态框！</p>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS 部分
我们为模态框添加一些样式，使其看起来更好。
/* styles.css */
body {
font-family: Arial, sans-serif;
}
/* 模态框背景 */
.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; /* 距离顶部15% */
padding: 20px;
border: 1px solid #888;
width: 80%; /* 宽度为80% */
}
/* 关闭按钮 */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
JavaScript 部分
我们使用JavaScript来控制模态框的显示和隐藏。
// app.js
document.addEventListener('DOMContentLoaded', (event) => {
// 获取模态框元素
var modal = document.getElementById("myModal");
// 获取打开按钮和关闭按钮
var btn = document.getElementById("openModalBtn");
var span = document.getElementsByClassName("close")[0];
// 点击按钮打开模态框
btn.onclick = function() {
modal.style.display = "block";
}
// 点击关闭按钮关闭模态框
span.onclick = function() {
modal.style.display = "none";
}
// 点击模态框外部区域关闭模态框
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
});
代码展示了如何创建一个简单的模态框，通过HTML定义结构，CSS进行样式美化，JavaScript控制显示和隐藏，可以根据需要进一步扩展功能和样式。
各位小伙伴们，我刚刚为大家分享了有关“app.js模态框”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/720135.html
微信扫一扫 