DIV+IFrame实现页面弹出窗口

最新推荐文章于 2024-05-05 08:00:00 发布

x_k

最新推荐文章于 2024-05-05 08:00:00 发布

阅读量2.2w

点赞数 3

分类专栏：前端文章标签： IFrame HTML

本文链接：https://blog.csdn.net/u011499992/article/details/50615613

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

需求：页面点击超链接或者按钮的时候弹出子窗口，子窗口中编写数据提交给父窗口，父子窗口页面不刷新。

思路：

父窗口：

<!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>

效果图：