以下是一个基于HTML、CSS和JavaScript的模态框示例代码，可以接受动态数据：
<!DOCTYPE html>
<html>
<head>
<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.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border-radius: 5px;
max-width: 500px;
}
</style>
</head>
<body>
<!-- 按钮触发模态框 -->
<button onclick="openModal()">打开模态框</button>
<!-- 模态框 -->
<div id="myModal" class="modal">
<!-- 模态框内容 -->
<div class="modal-content" id="modalContent">
</div>
</div>
<script>
// 打开模态框并传入动态数据
function openModal() {
var data = "这是动态数据";
// 获取模态框元素和内容容器
var modal = document.getElementById("myModal");
var modalContent = document.getElementById("modalContent");
// 设置内容为动态数据
modalContent.innerHTML = data;
// 显示模态框
modal.style.display = "block";
}
</script>
</body>
</html>
通过调用openModal()函数，可以打开模态框，并将动态数据传入模态框的内容容器中。你可以根据需要修改样式和调整代码逻辑。
内容由零声教学AI助手提供，问题来源于学员提问
