本文介绍如何使用原生JavaScript实现类似EasyUI的弹窗效果。通过动态创建DOM元素，分别构建半透明遮罩层与居中显示的对话框，并处理关闭逻辑。代码展示了如何计算屏幕居中位置、设置透明度及z-index层级，适用于需要轻量级弹窗且避免引入大型UI库的场景。
JavaScript原生实现模拟EasyUI弹窗及背景遮罩效果
页面设计较为朴素，重点在于功能实现。
具体代码实现如下：
<title>模仿easyui dialog的效果</title>
<script>
// 获取页面元素的辅助函数
var getElement = function() {
return document.getElementById(arguments[0]) || false;
}
function openDialog(dialogId) {
var maskId = "mask";
// 检查是否存在，若存在则先删除原有元素
if (getElement(dialogId)) {
document.removeChild(getElement(dialogId));// 删除操作：移除已弹出的div
}
if (getElement(maskId)) {
document.removeChild(getElement(maskId));// 删除操作：移除不可操作的遮罩层
}
// 创建背景置灰层
var maskDiv = document.createElement("div");
maskDiv.id = maskId;
maskDiv.style.position = "absolute";
maskDiv.style.zIndex = "1";
maskDiv.style.width = document.body.scrollWidth + "px";
maskDiv.style.height = document.body.scrollHeight + "px";
maskDiv.style.top = "0px";
maskDiv.style.left = "0px";
maskDiv.style.background = "gray";
maskDiv.style.filter = "alpha(opacity=10)";
maskDiv.style.opacity = "0.30";// 设置透明度
document.body.appendChild(maskDiv);// 将背景层添加到body中
// 创建Dialog对话框
var dialogDiv = document.createElement("div");
dialogDiv.id = dialogId;
dialogDiv.style.position = "absolute";
dialogDiv.style.zIndex = "9999";
dialogDiv.style.width = "400px";
dialogDiv.style.height = "200px";
dialogDiv.style.top = (parseInt(document.body.scrollHeight) - 200) / 2 + "px"; // 屏幕垂直居中
dialogDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px"; // 屏幕水平居中
dialogDiv.style.background = "white";
dialogDiv.style.border = "1px solid gray";
dialogDiv.style.padding = "5px";
dialogDiv.innerHTML = "(Dialog Content)";
// Dialog内部的关闭逻辑：同时关闭背景层和Dialog层
var closeControlloer = document.createElement("a");// 创建一个超链接作为关闭触发器
closeControlloer.href = "#";
closeControlloer.innerHTML = "关闭";
closeControlloer.onclick = function() {
document.body.removeChild(getElement(dialogId));// 移除dialog
document.body.removeChild(getElement(maskId));// 移除背景层
}
dialogDiv.appendChild(closeControlloer);// 在dialog中添加"关闭"按钮
document.body.appendChild(dialogDiv);// 将dialog添加到body中
}
</script>
<a href="#" onclick="openDialog('dialog');">Open Dialog</a>