通过纯JS和css实现自定义弹出对话框
2013-03-18 13:58
856 查看
需求:
实现通过一个弹出对话框来选择下拉列表中对应值进行参数设置操作,及弹出对话框中需要有一个下拉列表输入和一个确定按钮即可,要求弹出对话框后,背部界面不能够操作或者被屏蔽灰掉。
思路:
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()即可。
实现通过一个弹出对话框来选择下拉列表中对应值进行参数设置操作,及弹出对话框中需要有一个下拉列表输入和一个确定按钮即可,要求弹出对话框后,背部界面不能够操作或者被屏蔽灰掉。
思路:
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()即可。
相关文章推荐
- 鼠标滑过文字弹出一段说明文字CSS实现,不通过JS实现
- jquery实现弹出自定义对话框,父页面变灰
- CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
- JS+CSS实现带关闭按钮DIV弹出窗口的方法
- css+html+js实现多级下拉和弹出菜单
- .NET, MVC框架下利用html, CSS,js实现弹出窗口
- [Asp.net Mvc]通过UrlHelper扩展实现js,css修改后重新加载
- react native学习笔记24——Modal实现自定义弹出对话框
- 纯CSS(无JS)实现的二级弹出菜单效果代码
- JS实现弹出下载对话框及常见文件类型的下载
- div对话框,js+div+css实现好看的提示框效果
- 结合jQuery的unload方法实现JS退出页面弹出对话框
- Android编程实现AlertDialog自定义弹出对话框的方法示例
- JS+CSS实现单击后的弹出菜单代码
- .NET, MVC框架下利用html, CSS,js实现弹出窗口
- 通过JS控制CSS实现连帧动画
- Android中Dialog实现自定义弹出对话框
- js实现每个IP每天只弹出一次广告页,js实现html自动弹出对话框
- JS弹出对话框实现方法(三种方式)
- 自定义Dialog对话框并实现从底部弹出的动画效果