通過純JS和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";
}
在需要彈出對話方塊的地方直接呼叫createPrompt()即可。