今天闲来无事,练习父页面中打开一个模态窗口,同时可以将父页面的某些数据传到模态窗口,并将模态窗口的数据回传到父页面。在chrome浏览器上有问题通过bug调试,chrome并不支持,
window.showModalDialog模态窗口。有更好的解决方法欢迎大家喷!!!
1.父页面parent1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
负责人:<input id="name" type="text" name="name"><a href="javascript:openWin();" >选择</a>
</body>
<script type="text/javascript">
//window.location;
function openWin(){
//给被打开的窗口穿过去的参数
var param = {
win:window,
name:document.getElementById("name").value
};
//被打开的模态窗口的样式
styleParam = "dialogLeft:100px;dialogTop:100px;dialogWidth:400px;dialogHeight:300px;resizable:yes";
//模态窗口的返回值
var returnValue = window.showModalDialog("child1.html",param,styleParam);
//for chrome
if (!returnValue) {
returnValue = window.returnValue;
}
if(returnValue!=null){
document.getElementById("name").value = returnValue;
}
}
</script>
</html>
2.子页面child.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="content"><input type="button" id="btn" value="OK" οnclick="selectValue();">
</body>
<script type="text/javascript">
//获取父页面传来的参数
var args = window.dialogArguments;
//父页面的window对象
var win = args.win;
document.getElementById("content").value = args.name;
function selectValue(){
var xxx = {
age:12,
bitr:new Date()
};
if (window.opener) {
//for firehox \chrome
alert("if");
window.opener.returnValue = document.getElementById("content").value;
}else {
alert("else");
window.returnValue = document.getElementById("content").value;
}
window.close();
}
</script>
</html>