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

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

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

还有另外一种方法

再有另外一种方法

web跨页弹窗选值的更多相关文章

  1. A在SP.NET跨页多选

    在ASP.NET跨页多选 本文介绍怎样在ASP.NET中实现多页面选择的问题.其详细思路非常easy:用隐藏的INPUT记住每次选择的项目,在进行数据绑定时.检查保存的值,再在DataGrid中进行选 ...

  2. Bootstrap table 跨页全选

    此代码是针对于bootstrap table中分页的跨页全选. 以下是整个bootstrap的定义 <script type="text/javascript" src=&q ...

  3. Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  4. element ui表格常用功能如：导出 新增 删除 多选 跨页多选 固定表头 多级表头 合并行列 等常见需求

    <template> <div class="table-cooperte"> <el-table :data="tableData&quo ...

  5. layui table 跨页记忆选择

    layui 表格功能目前默认不支持跨页记忆选择 下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['j ...

  6. 每日学习心得：Js获取Checkboxlist所选值、instanceof 和typeof区别、为Array添加contains方法

    2013-11-24 前言: 上周在工作中遇到了一些跟JS以及前台交互的问题,虽然算不上多么高深,但是在解决时也走了一些弯路,所以就总结一下. 1.    JS获取checkboxList所选的值 这 ...

  7. 要在一般处理程序中获取其他页面的session值

    1.要在一般处理程序中获取其他页面的session值,需要引用名空间: using System.Web.SessionState; 2.然后继承一个接口:IRequiresSessionState, ...

  8. Candence下对“跨页连接器（off-page connector）”进行批量重命名的方法

    parts.ports.alias等等均可以在“属性编辑器(Property Editor)”中进行查看编辑,并通过复制到Excel等表格软件来进行批量修改.之后再粘贴回去的方法进行批量编辑.但是“跨 ...

  9. Web跨浏览器进程通信(Web跨域)

    Web跨域已是老生常谈的话题,这次来尝试下跨域浏览器进程之间的通信 —— 这在过去基本依靠网络中转实现   在之前一篇文章里尝试了跨浏览器的数据共享,最后提到使用LocalConnection还可以实 ...

随机推荐

  1. JS操作cookie以及本地存储（sessionStorage 和 localStorage ）

    JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...

  2. attr属性

    1.切换图片 $(".tip").hover(        function () {            $(this).attr("src"," ...

  3. RAID讲解

    RAID定义 RAID(Redundant Array of Independent Disk 独立冗余磁盘阵列)技术是加州大学伯克利分校1987年提出,最初是为了组合小的廉价磁盘来代替大的昂贵磁盘, ...

  4. ArcEngine和GDAL读写栅格数据机制对比（二）—— IPixelBlock读写栅格

    以下是设定一个矩形框,用IPixelBlock将256*256瓦片tile拼接成一个整块影像的代码,row1, col1, row2, col2是一个矩形框行列号范围.level是瓦片的金字塔等级.这 ...

  5. hibernate中@Entity和@Table的区别

    Java Persistence API定义了一种定义,可以将常规的普通Java对象(有时被称作POJO)映射到数据库.这些普通Java对象被称作Entity Bean.除了是用Java Persis ...

  6. Android APP开发笔记

    环境搭建 windows系统上需要以下软件: android SDK -- app开发工具包, 开发运行环境(包括SDK管理工具,和虚拟设备管理). JDK -- java 开发工具包, 负责app代 ...

  7. AngularJS form表单验证（非常全面)

    构建一个ng表单 novalidate=”novalidate” 2.form中不能有action属性.提交交由ng-submit处理 3.每个input一定要有ng-model,最好有一个name方 ...

  8. 抽取AWR数据

    使用$ORACLE_HOME/rdbms/admin/awrextr.sql $ sqlplus '/as sysdba' SQL*Plus: Release Production on Fri No ...

  9. CPU虚拟化技术（留坑）

    留坑~~~ 不知道这个是这么实现的 CPU虚拟化技术就是单CPU模拟多CPU并行,允许一个平台同时运行多个操作系统,并且应用程序都可以在相互独立的空间内运行而互不影响,从而显著提高计算机的工作效率.虚 ...

  10. Swift语言实战晋级-第9章 游戏实战-跑酷熊猫-1

    学习目标 一.进一步学习Swift的游戏制作 二.掌握SKNode,SKSpriteNode的运用 三.了解SpriteKit的物理系统 四.掌握动作(SKAction)的运用 在这一章,我们要通过制 ...