最近在项目中看到这样一种效果——点击当前网页文本框，然后弹出一个缩小的网页，并在网页里选择或填写数据，然后又返回当前网页，小网页关闭。感觉非常不错，其实在以前网上也看见过，只是当时没有留心。今天抽时间把它从项目中提炼出来，给自己做一个笔记，以备下次只需。不废话了。
第一步新建两个页面分别取名为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.
好了，这也算是一个新的开始吧。