web跨页弹窗选值

     最近在项目中看到这样一种效果——点击当前网页文本框，然后弹出一个缩小的网页，并在网页里选择或填写数据，然后又返回当前网页，小网页关闭。感觉非常不错，其实在以前网上也看见过，只是当时没有留心。今天抽时间把它从项目中提炼出来，给自己做一个笔记，以备下次只需。不废话了。


第一步新建两个页面分别取名为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.

好了，这也算是一个新的开始吧。

 

还有另外一种方法

 

再有另外一种方法

 

posted @ 2016-02-01 11:59  剧里局外  阅读(615)  评论(0)  编辑  收藏  举报