将当前div中的信息放入模态窗口可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<div id="myDiv" style="display: none;">
<!-- div中的信息 -->
<h2>这是一个模态窗口示例</h2>
<p>这里是一些信息。</p>
</div>
<button onclick="openModal()">打开模态窗口</button>
<script>
function openModal() {
// 获取div的内容
var divContent = document.getElementById("myDiv").innerHTML;
// 创建模态窗口
var modal = document.createElement("div");
modal.classList.add("modal");
// 将div内容插入到模态窗口中
modal.innerHTML = divContent;
// 显示模态窗口
modal.style.display = "block";
// 将模态窗口添加到页面中
document.body.appendChild(modal);
}
</script>
CSS:
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 9999;
}
.modal-content {
background-color: #fff;
padding: 20px;
margin: 20% auto;
width: 80%;
max-width: 600px;
}
请注意,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。在实际开发中,你可能需要更多的样式和交互效果,也可以使用现有的库或框架来简化开发过程。
领取专属 10元无门槛券
手把手带您无忧上云