window.showModalDialog（）
2018-08-07 本文已影响1人
痛心凉
showModalDialog:模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法.
使用方法：
vReturnValue = window.showModalDialog(路径 ， 可选参数 ，框体的样式) ；
*注：
谷歌浏览器不支持window.showModalDialog（）方法，在谷歌浏览器中用window.open（）方法解决这个问题；
参数传递
father.html
父接受子传递的内容：<input id="txt10" type="text" name="txt10"><br />
<button onclick="setPermission()">点击</button>
function setPermission() {
var url = "child.html";
//居中问题
var dialogLeftValue = screen.width / 2 - 200 + "px";
var returnValue;
//判断是否兼容Chrome浏览器
if (navigator.userAgent.indexOf("Chrome") > 0) {
var width = 600;
var height = 350;
var top = (window.screen.height - 30 - height) / 2;
var left = (window.screen.width - 30 - width) / 2;
window.open(url, self,"width=" + width + ",height=" + height +",top=" + top + ",left=" +left);
}else{
returnValue = window.showModalDialog(url, "", "dialogHeight:350px;dialogWidth:600px;status:0;dialogTop:100px;dialogLeft:" + dialogLeftValue);
}
}
child.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.tab{width:100%;height:100%;}
.tab-menu{height:42px;width:100%;background: rgba(170,255,245,0.5);}
.tab-menu ul{list-style:none;}
.tab-menu li{
display:block;width:100px;float:left;border:1px solid #ddd;padding: 10px 0;
text-align: center;
border-bottom: none;
}
.tab-box div{width:100%;display:none;}
/* 让第一个框显示出来 */
.tab-box div:first-Child{display:block;}
/* 改变选项卡选中时候的样式 */
.change{background:#fff;}
#btnFooter{
width: 100%;
height: 50px;
position: fixed;
bottom:0;
display: flex;
justify-content: flex-end;
}
</style>
</head>
<body scroll="no">
子传向父的内容： <input id="txt0" type="text" name="txt0"><br />
<button onclick="setFather()">点击</button>
</body>
<script src="ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
//设置父窗口的值
function setFather() {
if (navigator.userAgent.indexOf("Chrome") > 0) {
//获取元素之前必须用window.opener.
window.opener.document.getElementsByName("txt10")[0].value = document.getElementById("txt0").value ;
//获取父，中的对象
var mxwreport = window.opener.$("#ss").data("mxwreport");
}else{
window.dialogArguments.document.getElementsByName("txt10")[0].value = document.getElementById("txt0").value ;
}
}
</script>
</html>
