html中利用js写一个弹出注册框,原生js实现一个弹出框

其实弹出框的实现非常的简单。网上有很多种类的弹出框，比如jquery ui 的dialog colorbox fancybox等。jquery ui的dialog是一个专业的对话框 而colorbox和fancybox则更适用于播放图片。你可以改造这两个box让他们更像一个对话框。

不过有时候觉得什么都用jquery很累，一个对话框的好坏其实不是取决于功能有多强大，而是兼容性和界面。我喜欢新浪微博那种风格的对话框，所以我用js实现了弹出一个对话框的功能，同时用css美化了弹出框的风格。

先看看效果图：qq截图 图像失真了。

1.弹出遮罩层。/* 弹出遮罩层，去掉注释直接用 */

var back=document.createElement("div");

back.id="back";

var bWidth=parseInt(document.documentElement.scrollWidth);

var bHeight=parseInt(document.documentElement.scrollHeight);

var styleStr="top:0px;left:0px;position:absolute;background-color:rgb(0,0,0);width:"+bWidth+"px;height:"+bHeight+"px;";

styleStr+=(isIe)?"filter:alpha(opacity=30);":"opacity:0.3;";

back.style.cssText=styleStr;

document.body.appendChild(back);

//showBackground(back,15);

用back=document.createElement("div")创建一个div

分别设置这个div的宽度和高度，这里直接将整个浏览器填满。

styleStr是div的css样式字符串。

遮罩层的不透明度这里设为0.3，styleStr+=(isIe)?"filter:alpha(opacity=30);":"opacity:0.3;"; 可以兼容ie和firefox两种浏览器。

最后用document.body.appendChild(back)将back接到body上面。

2.屏蔽select下拉框。

如果你的页面中有下拉框，上面的遮罩层就会始终被这个下拉框挡住一部分，不管你将这个遮罩层的z-index设置得有多高，这是因为在ie8以下，select的优先级比div高，因此要是遮罩层有效，需要将select下拉框先影藏。

调用函数影藏下拉框：if(isIe){

setSelectState('hidden');

}