需求:页面点击超链接或者按钮的时候弹出子窗口,子窗口中编写数据提交给父窗口,父子窗口页面不刷新。
思路:
父窗口:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="message" disabled="disabled">
<br>
<a href="javascript:show();"> <font>弹出框</font>
</a>
<div id="myDiv" οnclick="cancle(this);"
style="position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 998">
<div id="popupDiv"
style="position: absolute; width: 80%; height: 80%; background-color: white; position: absolute; left: 50%; top: 50%; margin-left: -40%; margin-top: -20%;">
<iframe id="myFrame" frameborder="0" src="show.html"
style="position: absolute; width: 100%; height: 100%; border-radius: 3px;"></iframe>
</div>
</div>
</body>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
function myfun() {
// 隐藏myDiv
myDiv.style.display = "none";
}
function cancle(obj) {
obj.style.display = "none";
}
function show() {
myDiv.style.display = "block";
}
function get(data) {
var message = document.getElementById("message");
message.value = data;
myDiv.style.display = "none";
}
window.onload = myfun;
</script>
</html>
子窗口:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="allDiv">
<input type="text" id="data" value="默认值"> <input type="button"
id="send" οnclick="send();" value="传值给父窗口">
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
<h1>弹出框</h1>
</div>
</body>
<script type="text/javascript">
function load() {
// 设置滚动条
var allDiv = document.getElementById("allDiv");
allDiv.style.overflow = "auto";
}
function send() {
var data = document.getElementById("data").value;
window.parent.get(data);
}
window.onload = load;
</script>
</html>
效果图:
点击外面的区域也可以隐藏。