JavaScript的showModalDialog

最新推荐文章于 2019-11-13 15:24:55 发布
最新推荐文章于 2019-11-13 15:24:55 发布
阅读量574 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cckevincyh/article/details/53117421
版权

a1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <script language="JavaScript">

    function openWin(){
            /*
             * window.showModalDialog(sURL,vArguments,sFeatures)
             *      * 现实弹出窗口
             *      * sURL：字符串(String)。指定要载入和显示的 URL 。请求路径
             *      * vArguments：指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。
             *                      是可以任何类型的参数。
             *      * sFeatures：字符串(String)。指定对话框的窗口装饰。
             */
            window.showModalDialog("a2.html",window,"status:no;resizable:yes;dialogHeight:210px;dialogWidth:360px;unadorne:yes;help:no");
        }

  </script>

  <body>
       <form name="form1" action="test.html" method="post" >
             客户id: <input type="text" name="cid" value=""  id="cid"  ><br>
            客户名称<input type="text" name="cname" value=""  id="cname"  >
          <input type="button" name="ok" value="请选择客户" onclick="openWin();"/>
       </form>
</body>

</html>

a2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
   <script language="JavaScript">
  </script>
  <body>
       <table border="1">
          <tr>
            <td>操作</td>
            <td>客户id</td>
            <td>客户名称</td>
          </tr>

          <tr>
            <td><input type="button" value="选择" id="ss" onclick="viewData('001','深圳华为')"></td>
            <td>001</td>
            <td>深圳华为</td>
          </tr>
          <tr>
            <td><input type="button" value="选择"   onclick="viewData('002','用友软件')"> </td>
            <td>002</td>
            <td>用友软件</td>
          </tr>
       </table>
  </body>

</html>

这里写图片描述

a1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <script language="JavaScript">

    function openWin(){
            /*
             * window.showModalDialog(sURL,vArguments,sFeatures)
             *      * 现实弹出窗口
             *      * sURL：字符串(String)。指定要载入和显示的 URL 。请求路径
             *      * vArguments：指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。
             *                      是可以任何类型的参数。
             *      * sFeatures：字符串(String)。指定对话框的窗口装饰。
             * 
             *  * 建立模式对话框显示指定的文档。
             */
            //window.showModalDialog("a2.html",window,"status:no;resizable:yes;dialogHeight:210px;dialogWidth:360px;unadorne:yes;help:no");

            //建立无模式对话框显示指定的文档。
            window.showModelessDialog("a2.html",window,"status:no;resizable:yes;dialogHeight:210px;dialogWidth:360px;unadorne:yes;help:no");

        }

        function setData(cid,cname){
            document.getElementById("cid").setAttribute("value",cid);
            document.getElementById("cname").setAttribute("value",cname);
        }

  </script>

  <body>
       <form name="form1" action="test.html" method="post" >
             客户id: <input type="text" name="cid" value=""  id="cid"  ><br>
            客户名称<input type="text" name="cname" value=""  id="cname"  >
          <input type="button" name="ok" value="请选择客户" onclick="openWin();"/>
       </form>
</body>

</html>

a2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
   <script language="JavaScript">
        function viewData(cid,cname){
            /*
             * 现在要做的就是把a2页面的window对象换成a1页面的window对象
             * 
             *  * window对象的dialogArguments属性可以获取a1页面传过来的参数。
             *  * a1页面传过来的参数是a1页面的window对象，所以通过dialogArguments属性获取到的就是a1页面的window对象
             *  * sData变量就代表了a1页面的window对象
             *  * sData变量调用相关属性及方法，操作的就是a1页面的元素
             */
            var sData = window.dialogArguments; 

            sData.setData(cid,cname);

            window.close();

        }

  </script>
  <body>
       <table border="1">
          <tr>
            <td>操作</td>
            <td>客户id</td>
            <td>客户名称</td>
          </tr>

          <tr>
            <td><input type="button" value="选择" id="ss" onclick="viewData('001','深圳华为')"></td>
            <td>001</td>
            <td>深圳华为</td>
          </tr>
          <tr>
            <td><input type="button" value="选择"   onclick="viewData('002','用友软件')"> </td>
            <td>002</td>
            <td>用友软件</td>
          </tr>
       </table>
  </body>

</html>

这里写图片描述

c.
关注
专栏目录
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
10-29
javascript 多层模态窗口showModalDialog页面提交及刷新
javascript showModalDialog模态对话框使用说明
10-29
JavaScript 的 showModalDialog 方法是一个在老旧浏览器中广泛使用的函数，用于打开一个模态对话框。然而，值得注意的是，随着Web技术的发展，showModalDialog 方法的支持度已经逐渐减少，特别是现代浏览器如Chrome...
JS中showModalDialog 详细使用
Night In Forest
03-30 98
基本介绍：           showModalDialog()         (IE 4+ 支持)           showModelessDialog()      (IE 5+ 支持)           window.showModalDialog()                  方法用来创建一个显示HTML内容的模态对话框。           window.s...
javascript showmodaldialog
czh4869623的专栏
11-05 892
javascript showmodaldialog
Javascript中ShowModalDialog功能
积累，专注，一步一个脚印！
04-22 438
ShowModalDialog函数的功能：打开一个子窗口，并且可与父窗口相互传递数据，它与window.open的最大区别就在于由ShowModalDialog打开子窗口后，父窗口将不能操作。使用方法：vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])参数说明：sURL必选参数，类型：字符串。用来指定对话
showModalDialog用法
插上翅膀的虫子
11-07 375
http://www.mwjx.com/bbs/html/20000/18833.html 基本介绍： showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()方...
javascript showModalDialog 内跳转页面的问题
10-28
关于在使用JavaScript的showModalDialog函数中实现页面内跳转的问题，首先需要了解showModalDialog的用途和特性。showModalDialog是一个可以用来打开模态对话框的函数，它能够创建一个具有特定参数的新窗口，并能与...
Javascript showModalDialog两个窗体之间传值
12-09
Javascript 两个窗体之间传值实现代码javascript中还有一个函数window.showModalDialog也可以打开一个新窗体，不过他打开的是一个模态窗口，那么如何在父窗体和子窗体之间传值呢？我们先看该函数的定义：...
JavaScript中showModalDialog (模态窗口)详细使用
isaiah的专栏
12-28 1025
基本介绍：           showModalDialog()         (IE 4+ 支持)           showModelessDialog()      (IE 5+ 支持)           window.showModalDialog()                  方法用来创建一个显示HTML内容的模态对话框。           window.sho
javascript当中showModalDialog的用法
qq_43650923的博客
11-13 559
7.showModalDialog 例 1.7.1（showModalDialogOIEFF.html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head> <meta http-equiv="content-type" content="text/htm...
JavaScript中window.showModalDialog()详解
老谢的专栏
08-11 1338
JavaScript js 中window.showModalDialog()详解 window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框 window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框
js“弹出对话框”和“弹出窗口”详解
03-07 5281
JS中showModalDialog 详细使用 基本介绍：           showModalDialog()         (IE 4+ 支持)           showModelessDialog()      (IE 5+ 支持)           window.showModalDialog()                  方法用来创建一个显示HTML内容的模
showModalDialog和showModelessDialog使用心得
轻灵自由的珍珠
05-12 3011
showModalDialog和showModelessDialog使用心得一、showModalDialog和showModelessDialog有什么不同？　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。　　showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响(
JS中window.showModalDialog()详解
热门推荐
bobWu 的 学习日记
04-18 10万+
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。 使用方法： vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) vReturnValue =
js showModalDialog参数传递
落叶飘香
11-22 9064
<br />showModalDialog:模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法.<br />使用方法：   <br />   vReturnValue    =    window.showModalDialog(sURL    [,    vArguments]    [,sFe
JS打开模态窗口showModalDialog
A_Runner的博客
08-31 5870
“人人尽说江南好，游人只合江南老” 今天在使用谷歌浏览器通过JS打开模态窗口时，出现如下错误： Uncaught TypeError: window.showModalDialog is not a function 出现该问题的原因是，谷歌浏览器已经不支持该方法了。 解决方法： //兼容谷歌浏览器，如果不能直接打开模态窗口，则自定义一个窗口 if(!...
javascript showModalDialog详解：实现模态对话框的三种方式
本文主要介绍了如何在JavaScript中使用`showModalDialog`方法创建和操作模态对话框。这是一种在网页中显示一个全屏、遮罩背景的对话框，以便于用户集中注意力进行特定操作。`showModalDialog`函数通常用于旧版本的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值