通过纯JS和css实现自定义弹出对话框

最新推荐文章于 2026-07-13 18:52:14 发布

原创最新推荐文章于 2026-07-13 18:52:14 发布 · 1.7w 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web

本文介绍了一种纯JavaScript和CSS实现自定义弹出对话框的方法，包括创建遮罩层、对话框元素，并展示关键代码，用于设置对话框的内容、样式和交互功能。对话框包含下拉列表选择和确认按钮，背景界面在弹出对话框时会被屏蔽。

需求：

实现通过一个弹出对话框来选择下拉列表中对应值进行参数设置操作，及弹出对话框中需要有一个下拉列表输入和一个确定按钮即可，要求弹出对话框后，背部界面不能够操作或者被屏蔽灰掉。

思路：

1.开始以为so so much simple，毫不犹豫考虑prompt弹出对话框，结果发现prompt只能进行简单的文本输入操作，不能进行下拉列表选择输入操作，于是放弃。

2.很多BS模式系统中弹出对话框下拉列表是怎么实现的呢？因为他们可以使用强大的js库，如jquery，ext等等js库中有现成的对话框，功能超级强大哦，但是项目属于嵌入式项目，代码空间如城市里的地盘寸土寸金啊，不能为了一个小小需求而牺牲如此的代码空间去存放js库了，也就不能再考虑下去。

3.继续求助度娘，个人认为度娘在解决web前端问题方面还是很有实力的。发现了一种通用的解决方式，涉及到遮罩层、弹出层等等理论，就不赘述了，直接上解决方案吧。

解决方案：

关键js代码如下，

function createPrompt()
{
var divSp = document.createElement("div"); //弹出对话框
var newMask = document.createElement("div"); //遮罩层，用来屏蔽灰掉背部界面
var btnSub = document.createElement("input"); // 弹出对话框中按钮
var inner;

// 弹出对话框中要呈现的页面元素布局等html代码
inner = '<div class="fieldset" style="height:300px background:#A9A9A9">';
inner += ' <div class="fs-heading" style="background:#D2691E">';
inner += ' <h2>Please set the Time zone when you first login !</h2>';
inner += ' </div>';
inner += ' <ul class="fs-fieldgroup">';
inner += ' <li>';
inner += ' <label style="font-size:14px">Time zone :</label>';
inner += ' <select name="cboTimeZone" size="1" style="width:430px">';
for( var i = 0; i < timeZones.length; i++ )
{
if(i == 67) // default for (GMT+10:00)
{
inner += ' <option value=' + getTimeZoneOffset(i)+ ' selected="selected">' + timeZones[i] + '</option>';
}
else
{
inner += ' <option value=' + getTimeZoneOffset(i)+ '>' + timeZones[i] + '</option>';
}
}
inner += ' </select>';
inner += ' </li>';
inner += ' </ul>';
inner += '</div>';

// 创建弹出层遮罩层等
if ( !document.getElementById("mask") && 1)
{
//mask div
newMask.id = "mask";
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
newMask.style.width = "100%";
newMask.style.height = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight) + 100 + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "gray";
newMask.style.filter = "alpha(opacity=80)";
newMask.style.opacity = "0.5";
document.body.appendChild(newMask);
}

if ( !document.getElementById("promptID"))
{
//new div (prompt)
divSp.setAttribute("id", "promptID");
divSp.style.position = "absolute";
divSp.style.padding = "8px";
divSp.style.width = "10px";
divSp.style.height = "10px";
divSp.style.zIndex = "5000";
divSp.style.top = parseInt(window.screen.height * 0.21)+document.body.scrollTop+document.documentElement.scrollTop + 30 + "px";
divSp.style.left = parseInt(document.body.offsetWidth * 0.31)+document.body.scrollLeft+document.documentElement.scrollLeft + "px";
divSp.style.border = "1px dotted #576999";
divSp.style.backgroundColor = "#E4E7EF";
divSp.innerHTML = inner;
document.body.appendChild(divSp);
openDiv();
}
//it can be operated in android
if (merfound != 1)
{
document.getElementsByName("adsl_username")[0].disabled = "disabled";
document.getElementsByName("adsl_pwd")[0].disabled = "disabled";
}

if ( !document.getElementById("btnSubID"))
{
btnSub.setAttribute("id", "btnSubID");
btnSub.setAttribute("class", "btn-subtle");
btnSub.type = "button";
btnSub.style.width = "100px";
btnSub.style.position = "absolute";
btnSub.style.top = "80%";
btnSub.style.left = "40%";
btnSub.value = "Save ";
btnSub.onclick = function(){
setTimeZone();
setTimeout("restore()", 6000);
btnSub.setAttribute("class", "delClass");
document.getElementById("btnSubID").disabled = "disabled";
};
document.getElementById("promptID").appendChild(btnSub);
}
}

// 调整弹出对话框宽度和高度
function openDiv()
{
var divPrompt = document.getElementById("promptID");

var viewWidth = parseInt(document.body.offsetWidth * 0.37);
var viewHeight = parseInt(window.screen.height * 0.18);

if (viewWidth < 460 || viewWidth > 500)
{
viewWidth = 470;
}

if (viewHeight < 180 || viewHeight > 240)
{
viewHeight = 190;
}

divPrompt.style.width=viewWidth + "px";
divPrompt.style.height=viewHeight + "px";
}