最近在项目中看到这样一种效果——点击当前网页文本框，然后弹出一个缩小的网页，并在网页里选择或填写数据，然后又返回当前网页，小网页关闭。感觉非常不错，其实在以前网上也看见过，只是当时没有留心。今天抽时间把它从项目中提炼出来，给自己做一个笔记，以备下次只需。不废话了。
第一步新建两个页面分别取名为A.html，B.html.
第二步编写页面代码如下
A.html页面
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>demoA页面</title>
<script type="text/javascript">
function PopBreakfast(obj) {
var returnValue = window.showModalDialog("B.html", obj, "dialogWidth=300px;dialogHeight=150px");
alert(returnValue);
if (returnValue) {
obj.value = returnValue;
}
}
</script>
</head>
<body>
<form id="form1" action="">
<table>
<tr>
<td>城市</td>
<td><input type="text" id="txtcity" onclick="PopBreakfast(this)"/></td>
<td>地址</td>
<td><input type="text" id="txtaddress" onclick="PopBreakfast(this)"/></td>
</tr>
</table>
</form>
</body>
</html>
B.html页面
<html>
<head>
<title>demoB页面</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body
{
font-size: 12px;
font-family: arial;
}
select, input
{
padding: 0px;
margin: 0px;
}
#content-wrapper
{
margin: 20px 0px 20px 20px;
}
#content-wrapper td
{
text-align: left;
padding: 2px;
}
#content-wrapper td.title
{
font-weight: bold;
}
input.city
{
width: 180px;
}
select.city
{
width: 180px;
}
.confirm-btn
{
padding: 2px;
}
</style>
<script type="text/javascript">
function Confirm() {
var selectValue = document.getElementById("selectcity").value;
var inputValue = document.getElementById("txtaddress").value;
if (inputValue.length > 0) {
window.returnValue = inputValue;
} else {
window.returnValue = selectValue;
}
alert(window.returnValue);
window.close();
}
window.onclose = function () {
window.returnValue = "";
}
</script>
</head>
<body>
<form id="form2" >
<center>
<div id="content-wrapper">
<table cellpadding="0" cellspacing="0" width="250px">
<tr>
<td class="title">
选择城市
</td>
</tr>
<tr>
<td>
<select id="selectcity" class="city">
<option value="">-- Select --</option>
<option value="北京">北京</option>
<option value="广州">广州</option>
<option value="上海">上海</option>
<option value="香港">香港</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="txtaddress" type="text" class="city" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Confirm" onclick="Confirm()" class="confirm-btn" />
</td>
</tr>
</table>
</div>
</center>
</form>
</body>
</html>
第三步测试，结果如下图:
开始页面A
点击后弹出窗体效果图：
选中填写之后的效果：
经测试必须 在iis里或vs里运行才可以看到效果，否则有跨域错误。
错误提示:Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
好了，这也算是一个新的开始吧。
时间： 2024-08-25 16:51:34