window.open 和 window.showModelDialog弹出窗口

最新推荐文章于 2022-09-07 15:10:05 发布
最新推荐文章于 2022-09-07 15:10:05 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： 前端js 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TRQ809135642/article/details/72693231
版权

window.open("url","弹出新窗口的参数","样式参数");在弹出窗口中通过window.openner接受父窗口；

window.showModelDialog("url","传递的参数","样式参数");在弹出窗口中通过window.dialogArguements接受父窗口；

下面是我写的一个demo：

父页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function openWin(){
            window.open("clazz.jsp","_blank","status=no, width=400,height=300,toolbar=no,titlebar=no,menubar=no,location=no");    
            setValue(clazz,ctime,time);
        }                  
        
    function setValue(clazz,ctime,time){
        document.getElementById("clazz").value=clazz;
        document.getElementById("ctime").value=ctime;
        document.getElementById("time").value=time;
    }
</script>
</head>
<body>
    <div>
        班次种类：<input type="text" name="clazz" id="clazz"/>&nbsp;&nbsp;
        班次名称：<input type="text" name="ctime" id="ctime"/>&nbsp;&nbsp;
        班次时间段：<input type="text" name="time" id="time"/>&nbsp;&nbsp;
                <input type="button" value="请选择班次" οnclick="openWin();"/>
    </div>
</body>
</html>

打开后效果：


子页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
table
  {
  border-collapse:collapse;
 
  }

table, td, th
  {
  border:1px solid black;
  }
</style>
<script type="text/javascript">
    function options(clazz,ctime,time){
        var addClazz = window.opener;
        addClazz.setValue(clazz,ctime,time);        
        window.close();
    }
    
</script>
</head>
<body>
    <div>
        <table>
                <tr>
                    <th>操作</th>
                    <th>班次种类</th>
                    <th>班次名称</th>
                    <th>班次时间段</th>
                </tr>
            <tbody>
                <tr>
                    <td><input type="button" id="" value="选择" οnclick="options('三班倒','早班','00:00-08:00');"/></td>
                    <td>三班倒</td>
                    <td>早班</td>
                    <td>00:00-08:00</td>
                </tr>
                <tr>
                    <td><input type="button" id="" value="选择" οnclick="options('三班倒','中班','08:00-16:00');"/></td>
                    <td>三班倒</td>
                    <td>中班</td>
                    <td>08:00-16:00</td>
                </tr>
                <tr>
                    <td><input type="button" id="" value="选择" οnclick="options('三班倒','晚班','16:00-00:00');"/></td>
                    <td>三班倒</td>
                    <td>晚班</td>
                    <td>16:00-00:00</td>
                </tr>
                <tr>
                    <td><input type="button" id="" value="选择" οnclick="options('两班倒','早班','08:00-20:00');"/></td>
                    <td>两班倒</td>
                    <td>早班</td>
                    <td>08:00-20:00</td>
                </tr>
                <tr>
                    <td><input type="button" id="" value="选择" οnclick="options('两班倒','晚班','20:00-08:00');"/></td>
                    <td>两班倒</td>
                    <td>晚班</td>
                    <td>20:00-08:00</td>
                </tr>
            </tbody>
        </table>
        </div>
</body>
</html>

打开后效果：

当点击窗口的“”请选择班次按钮后“”，弹出子窗口如上表格：


点击任意一个选择按钮，相应值就会出现在父窗口上。

如图：



it界小哥
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript弹出窗口 window.open使用方法以及参数说明分析篇
01-21
window.open使用方法以及参数说明一、window.open()支持环境： 　　 　　JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 　　 二、基本语法： 　　 　　window.open(pageURL,name,parameters) 　　 　　其中： 　　pageURL 为子窗口路径 　　name 为子窗口句柄 　　parameters 为窗口参数(各参数用逗号分隔) 　　 三、各项参数 　　 　　其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。 　　 　　参数 | 取值范围 | 说明 　　| | 　　al
父子窗口传值window.showModalDialog以及window.open用法简介
12-19
window.showModalDialog以及window.open用法简介
window.showModalDialog以及window.open用法简介
骆枫专栏
04-12 1664
window.showModalDialog以及window.open用法简介 一、window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+二、基本语法：window.open(pageURL,name,parameters) 其中：pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数
window.showModalDialog 的详细介绍
背着键盘流浪
01-05 324
1.模式对话框父窗口 弹出模式对话框 代码如下 Java代码 1.window.showModalDialog(url,window, 2. 3."help:no;scroll:no;resizable:no;status:0;dialogWidth:420px;dialogHeight:200px;center:yes" ); window.showModalDial...
window.open实现模式窗口
我的程序我做主
01-08 236
实现模式窗口有两种方式。window.showModalDialog以及window.open。 一、方式介绍 window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) windo...
showModelDialog弹出文件下载窗口的使用示例
09-04
主要介绍了showModelDialog弹出文件下载窗口的使用示例，方法很简单，大家可以直接参考下面的代码使用
window.show
12-30
showdialog,showmodeldialog,dialog,弹出窗口
open()代替showModelDialog()例子
08-24
因为项目中使用showModalDialog函数的地方特别多，所以必须用一个类似方法实现功能，也就是window.open() 　首先是判断子窗口关闭，因为项目是在子窗口关闭（确定按钮）的时候向父页面传递值的。
【chrome&Edge不兼容openModalDialog弹出模态窗口window.showModalDialog解决办法】
最新发布
weixin_50188421的博客
09-07 3180
现在项目中只能在IE打开弹窗页面，在chrome/Edge无法打开弹窗。
window.showModelDialog和window.open方法
Doris0430的博客
11-29 603
window.showModelDialog(url,params,features); 可以在IE浏览器中打开窗口，在谷歌浏览器中不能使用 利用window.dialogArguements 接收父窗口的数据 window.open(url,name,features,replace); 可以在谷歌浏览器中打开窗口 三种传递参数的方法： url传参： 比如 “localhost:...
window.open 参数 和 showModalDialog() 和 window.showModalDialog()
yaya203的专栏
07-15 1730
[javascipt:]window.open("Webpage.asp?",Derek,"height=100,width=100,status=yes,toolbar=yes, menubar=no,location=no"); 此语句打开一个新窗口，页面为webpage.asp，参数为var，名字为Derek，高为100，宽为100，显示状态栏和工具条，不显示菜单和地址。 具体总结的各个属性参数如下：  window= object.open([URL ][, name ][, features ][
window.open的例子和使用方法以及参数说明（完整版）
wonsoft的专栏
04-30 1238
window.open的例子和使用方法以及参数说明（完整版）一、window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+      二、基本语法：　　window.open(pageURL,name,parameters) 　　其中：　　pageURL 为子窗口路径 　　name 为子窗口句柄 　　parameters 为
javascript window.open showModelWindow收集
胡杰的专栏
04-16 3336
方法一 模式窗体 主页面打开新窗口js 事件： function ShowModelWindow() {          var iTop = (window.screen.height - 600) / 2;          var iLeft = (window.screen.width - 500) / 2;          var reVal = window.
window.open() 打开的子页面 往主页面传参问题
wen_binobject的博客
09-11 2131
国研兄弟遇到一个问题 问我我百度了下帮他解决了 下面是我参考的demo ， 虽然不难不过以前没有遇到过这样的需求，就当多了解点姿势了。 &amp;lt;!--主页面的代码--&amp;gt;&amp;lt;br&amp;gt;&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charse
windows中showModalDialog的用法
jiumoji1987的博客
12-15 506
windows中showModalDialog的用法 (2012-12-14 14:07:15) 标签： showmodaldialog 杂谈 分类： 其他杂项 &lt;!-- 正文开始 --&gt; 参数传递：1. 要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：-...
关于window.open和window.showModelDialog传值问题
木林森
10-27 171
最近在关于window.open和window.showModelDialog传值问题上有点纠结，弄了好半天才明白，以前也没怎么去用过。有如下总结，希望跟我遇到同样问题的朋友分享，共同学习共同进步。 主要问题是通过javascript 中window.open和window.showModelDialog打开的页面向父页面传值的问题。 1。window.open 把值传给父窗口中的表单用wi...
关于模态窗口(showModalDialog)的专题【收藏】
aasagk80068的博客
10-01 223
关于模态窗口(showModalDialog)的专题【收藏】 转自：http://www.cnblogs.com/donnet/articles/1039509.html 1.模态窗口的打开,model window open 2.模态窗口的关闭,model window close 3.模态窗口的传递参数,model window get valuse 4.其他......
模态窗口点滴
weixin_34387468的博客
04-24 104
1.模态窗口的打开,model window open2.模态窗口的关闭,model window close3.模态窗口的传递参数,model window  get valuse4.其他....,other .. 1.window.showModalDialog("DialogPage.aspx","newwin","dialogHeight: 200px; dialogWidth: 150...
window.open()和window.showModalDialog 的使用及传值操作
shadow_zed的博客
01-30 4701
本人在使用时主要实现如下个功能， 　　以对话框形式弹出画面，且要求对话框置顶，不可操作其他画面，并且关闭画面时刷新父页面。 window.open 可实现以对话框形式弹出画面，并且关闭画面时刷新父页面。但“对话框置顶，不可操作其他画面”本人并未找到方法。 //刷新父页面 Response.Write("&lt;script&gt;window.opener.location.href=win...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值