JavaScript 实现模态对话框 源代码大全(2)


<html>
<title>`````</title>
<head>
<meta 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%";
}
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"padding:10px;\">"+string+" <br /><br /><input type=\"button\" onclick=\"DialogHide();\" value=\" 关闭 \"></div>";
DialogShow(ShowDiv,250,120,300,100);
}
// --></script>
<style><!--
body{margin:0}
--></style><style bogus="1">body{margin:0}</style>
</head>
<body>
<div>
<div>
<input type="button" value="显示对话框">
<select><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" value="aaa">
<input type="radio">11 <input type="checkbox">22 <input type="password" value="aaa">
</div>
</body>
</html>


三、Javascript模态对话框 取父页的值
1. a.htm 父页
有 window.showModalDialog("b.htm");
有 Html元素 <input type="text" value="value">
2.b.htm 弹出页面
能否在 b.htm 上取到 a.htm 中 t1值 ?
回答:
在a.html中设置
var results = window.showModalDialog("b.html");
(results){alert(results["key"]);}
在b.html中
<script>
window.Value={key:"返回到父页面"}
</script>
四、模态对话框模仿MessageBox

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjwxzw.html