[ZT]JavaScript+div实现模态对话框[修正版]

JavaScript+div实现模态对话框。主要是2个层来完成这个效果，第一就是用来锁住下面整个页面的层，要有透明的效果，可以用filter:alpha(opacity=50)。还有一个层是用来显示对话框内容的，所以zIndex参数一定要设置的比锁频层高。

对话框的CSS可以自己定义一下，要注意的是，CSS中body一定要定义margin:0，否则锁频时，会出现空隙，而产生锁频不完整的问题，还有一个就是Select这个控件的问题，因为在IE里，他的zIndex很高，所以锁频层盖不住他，这里可以用两种办法，一种是把他隐藏掉，一种可以把他的disabled属性设置为false，第二种方法只能禁止编辑它，但是还是会在锁频层上当，效果不佳，还是隐藏掉比较好。

JavaScript代码

var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;
function StrCode(str){
if(encodeURIComponent)
return encodeURIComponent(str);
if(escape)
return escape(str);
}

function Browser(){
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.isOP = false;
this.isSF = false;
ua = navigator.userAgent.toLowerCase();
s = "opera";
if ((i = ua.indexOf(s)) >= 0){
this.isOP = true;return;
}
s = "msie";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
return;
}
s = "netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
return;
}
s = "gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
return;
}
s = "safari";
if ((i = ua.indexOf(s)) >= 0) {
this.isSF = true;
return;
}
}

function DialogShow(showdata,ow,oh,w,h){
var objDialog = document.getElementById("DialogMove");
if (!objDialog)
objDialog = document.createElement("div");
t_DiglogW = ow;
t_DiglogH = oh;
DialogLoc();
objDialog.id = "DialogMove";
var oS = objDialog.style;
oS.display = "block";
oS.top = t_DiglogY + "px";
oS.left = t_DiglogX + "px";
oS.margin = "0px";
oS.padding = "0px";
oS.width = w + "px";
oS.height = h + "px";
oS.position = "absolute";
oS.zIndex = "5";
oS.background = "#FFF";
oS.border = "solid #000 1px";
objDialog.innerHTML = showdata;
document.body.appendChild(objDialog);
}

function DialogHide(){
ScreenClean();
var objDialog = document.getElementById("DialogMove");
if (objDialog)
objDialog.style.display = "none";
}

function DialogLoc(){
var dde = document.documentElement;
if (window.innerWidth){
var ww = window.innerWidth;
var wh = window.innerHeight;
var bgX = window.pageXOffset;
var bgY = window.pageYOffset;
}else{
var ww = dde.offsetWidth;
var wh = dde.offsetHeight;
var bgX = dde.scrollLeft;
var bgY = dde.scrollTop;
}
t_DiglogX = (bgX + ((ww - t_DiglogW)/2));
t_DiglogY = (bgY + ((wh - t_DiglogH)/2));
}

function ScreenConvert(){
var browser = new Browser();
var objScreen = document.getElementById("ScreenOver");
if(!objScreen)
var objScreen = document.createElement("div");
var oS = objScreen.style;
objScreen.id = "ScreenOver";
oS.display = "block";
oS.top = oS.left = oS.margin = oS.padding = "0px";
if (document.body.clientHeight) {
var wh = document.body.clientHeight + "px";
}else if (window.innerHeight){
var wh = window.innerHeight + "px";
}else{
var wh = "100%";
}
if (document.body.scrollHeight)
{
var wh = document.body.scrollHeight + "px";
}
oS.width = "100%";
oS.height = wh;
oS.position = "absolute";
oS.zIndex = "3";
if ((!browser.isSF) && (!browser.isOP)){
oS.background = "#cccccc";
}else{
oS.background = "#cccccc";
}
oS.filter = "alpha(opacity=50)";
oS.opacity = 40/100;
oS.MozOpacity = 40/100;
document.body.appendChild(objScreen);
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "hidden";
}

function ScreenClean(){
var objScreen = document.getElementById("ScreenOver");
if (objScreen)
objScreen.style.display = "none";
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "visible";
}

function Demo(string){
ScreenConvert();
var ShowDiv="<div style=\"padding:10px;\">"+string+" <br /><br /><input type=\"button\" onclick=\"DialogHide();\" value=\" 关闭 \"></div>";
DialogShow(ShowDiv,250,120,300,100);
}

CSS代码

body{margin:0}

XML/HTML代码

<div style="border:1px solid;width:100%">
<div>
<input type="button" value="显示对话框" onclick="javascript:Demo('o(∩_∩)o...哈哈!');">
<select name=""><option value="" selected>1</option><option value="">2</option><option value="">2</option><option value="">2</option><option value="">2</option></select>
<input type="text" name="" value="aaa">
<input type="radio" name="">11 <input type="checkbox" name="">22 <input type="password" name="" value="aaa">
</div>

HTML代码
<html>

<title>`````</title>

<head>

<meta name="keywords" content="51windows.Net">

<meta http-equiv=content-type content="text/html; charset=gb2312">

<script type="text/javascript">

var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;

function StrCode(str){

if(encodeURIComponent)

return encodeURIComponent(str);

if(escape)

return escape(str);

}
function Browser(){

var ua, s, i;

this.isIE = false;

this.isNS = false;

this.isOP = false;

this.isSF = false;

ua = navigator.userAgent.toLowerCase();

s = "opera";

if ((i = ua.indexOf(s)) >= 0){

this.isOP = true;return;

}

s = "msie";

if ((i = ua.indexOf(s)) >= 0) {

this.isIE = true;

return;

}

s = "netscape6/";

if ((i = ua.indexOf(s)) >= 0) {

this.isNS = true;

return;

}

s = "gecko";

if ((i = ua.indexOf(s)) >= 0) {

this.isNS = true;

return;

}

s = "safari";

if ((i = ua.indexOf(s)) >= 0) {

this.isSF = true;

return;

}

}
function DialogShow(showdata,ow,oh,w,h){

var objDialog = document.getElementById("DialogMove");

if (!objDialog)

objDialog = document.createElement("div");

t_DiglogW = ow;

t_DiglogH = oh;

DialogLoc();

objDialog.id = "DialogMove";

var oS = objDialog.style;

oS.display = "block";

oS.top = t_DiglogY + "px";

oS.left = t_DiglogX + "px";

oS.margin = "0px";

oS.padding = "0px";

oS.width = w + "px";

oS.height = h + "px";

oS.position = "absolute";

oS.zIndex = "5";

oS.background = "#FFF";

oS.border = "solid #000 1px";

objDialog.innerHTML = showdata;

document.body.appendChild(objDialog);

}
function DialogHide(){

ScreenClean();

var objDialog = document.getElementById("DialogMove");

if (objDialog)

objDialog.style.display = "none";

}
function DialogLoc(){

var dde = document.documentElement;

if (window.innerWidth){

var ww = window.innerWidth;

var wh = window.innerHeight;

var bgX = window.pageXOffset;

var bgY = window.pageYOffset;

}else{

var ww = dde.offsetWidth;

var wh = dde.offsetHeight;

var bgX = dde.scrollLeft;

var bgY = dde.scrollTop;

}

t_DiglogX = (bgX + ((ww - t_DiglogW)/2));

t_DiglogY = (bgY + ((wh - t_DiglogH)/2));

}
function ScreenConvert(){

var browser = new Browser();

var objScreen = document.getElementById("ScreenOver");

if(!objScreen)

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

var oS = objScreen.style;

objScreen.id = "ScreenOver";

oS.display = "block";

oS.top = oS.left = oS.margin = oS.padding = "0px";

if (document.body.clientHeight) {

var wh = document.body.clientHeight + "px";

}else if (window.innerHeight){

var wh = window.innerHeight + "px";

}else{

var wh = "100%";

}
if (document.body.scrollHeight)
{
var wh = document.body.scrollHeight + "px";
}

oS.width = "100%";

oS.height = wh;

oS.position = "absolute";

oS.zIndex = "3";

if ((!browser.isSF) && (!browser.isOP)){

oS.background = "#cccccc";

}else{

oS.background = "#cccccc";

}

oS.filter = "alpha(opacity=50)";

oS.opacity = 40/100;

oS.MozOpacity = 40/100;

document.body.appendChild(objScreen);

var allselect = document.getElementsByTagName("select");

for (var i=0; i<allselect.length; i++)

allselect[i].style.visibility = "hidden";

}
function ScreenClean(){

var objScreen = document.getElementById("ScreenOver");

if (objScreen)

objScreen.style.display = "none";

var allselect = document.getElementsByTagName("select");

for (var i=0; i<allselect.length; i++)

allselect[i].style.visibility = "visible";

}
function Demo(string){

ScreenConvert();

var ShowDiv="<div style=\"padding:10px;\">"+string+" <br /><br /><input type=\"button\" onclick=\"DialogHide();\" value=\" 关闭 \"></div>";

DialogShow(ShowDiv,250,120,300,100);

}

</script>

<style>

body{margin:0}

</style>

</head>

<body>

<div style="border:1px solid;width:100%">

<div>

<input type="button" value="显示对话框" onclick="javascript:Demo('o(∩_∩)o...哈哈!');">

<select name=""><option value="" selected>1</option><option value="">2</option><option value="">2</option><option value="">2</option><option value="">2</option></select>

<input type="text" name="" value="aaa">

<input type="radio" name="">11 <input type="checkbox" name="">22 <input type="password" name="" value="aaa">

</div>
</body>

</html>

[Ctrl+A 全选 提示：你可先修改部分代码，再按运行]