简单实现功能如上： 1，单击按钮，模态框弹出。
2、单击红色的叉号关闭复选框。
思路：先将没有隐藏的属性写好，然后通过js实现新建各种标签以及属性。
具体代码如下：
<!DOCTYPE html><html><head> ???<meta charset="UTF-8"> ???<title></title> ???<style type="text/css"> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????html,body{ ???????????height: 100%; ???????} ???????#box{ ???????????width: 100%; ???????????height: 100%; ???????????background: rgba(0,0,0,.3); ???????} ???????#content{ ???????????position: relative; ???????????top: 150px; ???????????width: 400px; ???????????height: 200px; ???????????line-height: 200px; ???????????text-align: center; ???????????color: red; ???????????background-color: #fff; ???????????margin: auto; ???????} ???????#span1{ ???????????position: absolute; ???????????background-color: red; ???????????top: 0; ???????????right: 0; ???????????width: 30px; ???????????height: 30px; ???????????line-height: 30px; ???????????text-align: center; ???????????color: #fff; ???????????cursor: pointer; ???????} ???</style></head><body><button id="btn">弹出</button></body><script type="text/javascript"> ???//获取dom元素 1.获取事件源 ???var oBtn = document.getElementById(‘btn‘); ???//创建弹出模态框的相关DOM对象 ???var oDiv = document.createElement(‘div‘); ???var oP = document.createElement(‘p‘); ???var oSpan = document.createElement(‘span‘); ???// 设置属性 ???oDiv.id = ‘box‘; ???oP.id = ‘content‘ ???oP.innerHTML = ‘模态框成功弹出‘ ???oSpan.innerHTML = ‘X‘; ???oSpan.id = ‘span1‘ ???// 追加元素 ???oDiv.appendChild(oP); ???oP.appendChild(oSpan); ???// 点击弹出按钮 弹出模态框 ???oBtn.onclick = function(){ ???????//动态的添加到body中一个div ???????this.parentNode.insertBefore(oDiv,btn) ???} ???// 点击X 关闭模态框 ???oSpan.onclick = function(){ ???????// 移除oDiv元素 ???????oDiv.parentNode.removeChild(oDiv) ???}</script></html>js 实例2 实现模态框弹出；
原文地址：https://www.cnblogs.com/xz2ll/p/9111880.html