使用javascript打开模态对话框

最新推荐文章于 2023-12-23 15:44:39 发布
最新推荐文章于 2023-12-23 15:44:39 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Web技术 文章标签： javascript button input generator html function

1. 标准的方法

 

例：<span style="CURSOR: pointer" οnclick="openWin  
(’http://www.deepteach.com’, ’500px’, ’400px’, ’no’)">点击</span> 

 

2. 要注意的是，Firefox并不支持该功能，它支持的语法是

window.open  
(’openwin.html’,'newWin’, 'modal=yes, width=200,height=200,resizable=no, scrollbars=no’ ); 

 

3. 如何自动判断浏览器

 

 

4. 如何在页面之间传递数值

(一)showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.

farther.html

 

child.html

--------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META content="EditPlus" name="Generator">
<META content="" name="Author">
<META content="" name="Keywords">
<META content="" name="Description">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
</HEAD>
<BODY>
<FONT face="宋体"></FONT>
<br>
        父窗口传递来的值:<input id="txt0" type="text" name="txt0"><br>
        输入要设置父窗口的值:<input id="txt1" type="text" name="txt1"><input id="Button1" οnclick="setFather()" type="button" value="设置父窗口的值" name="Button1"><br>
        输入返回的值:<input id="txt2" type="text" name="txt2"><input id="Button2" οnclick="retrunValue()" type="button" value="关闭切返回值" name="Button2">
<input id="Button3" οnclick="" type="button" value="关闭刷新父窗口" name="Button3">
<script language="javascript">
<!--
var k=window.dialogArguments; 
//获得父窗口传递来的值 
if(k!=null) 
        { 
        document.getElementById("txt0").value = k.document.getElementById("txt9").value; 
        } 
//设置父窗口的值 
function setFather() 
        { 
        k.document.getElementById("txt10").value = document.getElementById("txt1").value 
        } 
//设置返回到父窗口的值 
function retrunValue() 
        { 
var s = document.getElementById("txt2").value; 
        window.returnValue=s; 
        window.close(); 
        } 
//--> 
</script>
</BODY>
</HTML>

----------------------------
说明:
由于showModalDialog缓存严重,下面是在子窗口取消客户端缓存的设置.也可以在服务器端取消缓存,参考:
http://adandelion.cnblogs.com/articles/252137.html
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

 

(二)下面是关闭刷新父窗口的例子

farther.html

-----------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
<!--
function openChild() 
        { 
var k = window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px"); 
if(k == 1)//判断是否刷新 
        { 
        alert('刷新'); 
        window.location.reload(); 
        } 
        } 
//--> 
</script>
</HEAD>
<BODY>
<br>
        传递到父窗口的值:<input id="txt9" type="text" value="3333333333333" NAME="txt9"><br>
<input type="button" value="openChild" οnclick="openChild()" ID="Button1" NAME="Button1">
</BODY>
</HTML>

 

child.html
----------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META content="EditPlus" name="Generator">
<META content="" name="Author">
<META content="" name="Keywords">
<META content="" name="Description">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
</HEAD>
<BODY>
<FONT face="宋体"></FONT>
<br>
        父窗口传递来的值:<input id="txt0" type="text" name="txt0"><br>
<input id="Button1" οnclick="winClose(1)" type="button" value="关闭刷新父窗口" name="Button1">
<input id="Button2" οnclick="winClose(0)" type="button" value="关闭不刷新父窗口" name="Button2">
<script language="javascript">
<!--
var k=window.dialogArguments; 
//获得父窗口传递来的值 
if(k!=null) 
        { 
        document.getElementById("txt0").value = k.document.getElementById("txt9").value; 
        } 
//关闭窗口返回是否刷新的参数. 
function winClose(isRefrash) 
        { 
        window.returnValue=isRefrash; 
        window.close(); 
        } 
//--> 
</script>
</BODY>
</HTML>

张建飞（Frank）
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 自制模态对话框
vastli的博客
04-01 4267
预备知识：HTML CSS： position；opacity；z-index；margin...... JS:document.getElementById('id1').classList.remove('hide'); document.getElementById('id1').classList.add('hide');完整代码：<!DOCTYPE html> <html lang=
利用javascript打开模态对话框(示例代码)
10-26
本篇文章主要是对利用javascript打开模态对话框的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
js编写弹出模态框
m0_74460131的博客
11-11 1919
4、这样就完成了弹出模态框和关闭模态框，但是有一个bug，如果我们没有关闭模态框继续点击按钮，他就会一直产生模态框，那我们就要给他设置一个判断是否已经出现模态框，怎么判断呢？点击button后出现模态框（模态框总体样式和点击按钮代码）3、关闭模态框，点击x(cancelBut)就把模态框remove掉（cancel样式和点击cancel代码）初始打开就会有一个按钮在我们的静态页面，那我们是不是应该在body里面写一个button。点击按钮出现模态框，点击x按钮模态框消失。点击button出现模态框。
js实现在页面中点击一个按钮弹出模态框
han_han__的博客
09-08 4027
js实现在页面中点击一个按钮弹出模态框
Bootstrap打开和关闭模态框API
最新发布
Lingoic的博客
12-23 571
【代码】Bootstrap关闭模态框API。
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
昊虹AI笔记
10-25 2971
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
javascript showModalDialog模态对话框使用说明
10-29
使用javascript打开模态对话框，想学习showModalDialog使用方法的朋友可以参考下。
Bootstrap模态对话框的简单使用
09-02
如果希望每次打开模态对话框时清空表单数据，可以监听模态框的`hidden`事件，并在回调函数中重置表单： ```javascript $('#modal1').modal('hide'); $("#modal1").on("hidden", function() { $('#form1')[0].reset...
BootStrap3中模态对话框的使用
08-31
首先，使用模态对话框需要引入必要的JavaScript和CSS库。确保在HTML文档的`<head>`部分引入Bootstrap的CSS框架以及jQuery库，因为Bootstrap的模态功能依赖于jQuery。例如： ```html <!-- 引入Bootstrap CSS --> ...
js弹出模态窗口
08-28
别人写的，感觉比较好用，没找到下载，是从人家网页里扣出来的，小小整理一下。
JavaScript无提示关闭窗口(兼容IE/Firefox/Chrome)
10-30
JavaScript无提示关闭当前页面窗口，兼容IE/Firefox/Chrome (Close the current page window without confirm by JavaScript, support all browsers)
ArtDialog Vista风格高兼容度的javascript对话框组件 ArtDialog 仿Vista风格的javascript对话框组件，具有超高的兼容性，对IE、火狐、Google浏览器兼容都不错，而且设计精美，弹出框的功能也很多：比如弹出图片、弹出动画、右下角消息、询问框、警告、弹出菜单、调用外部页面等，代码书写规范，也可作为学习JavaScript的参考范例。
04-15
ArtDialog Vista风格高兼容度的javascript对话框组件 ArtDialog 仿Vista风格的javascript对话框组件，具有超高的兼容性，对IE、火狐、Google浏览器兼容都不错，而且设计精美，弹出框的功能也很多：比如弹出图片、弹出动画、右下角消息、询问框、警告、弹出菜单、调用外部页面等，代码书写规范，也可作为学习JavaScript的参考范例。
JS打开模态窗口showModalDialog
A_Runner的博客
08-31 5715
“人人尽说江南好，游人只合江南老” 今天在使用谷歌浏览器通过JS打开模态窗口时，出现如下错误： Uncaught TypeError: window.showModalDialog is not a function 出现该问题的原因是，谷歌浏览器已经不支持该方法了。 解决方法： //兼容谷歌浏览器，如果不能直接打开模态窗口，则自定义一个窗口 if(!...
JavaScript使用类-模态窗口
分享学习网络的点点滴滴
10-12 557
在这个特定的代码片段中，当点击 btnsOpenModal 中的任何一个元素时，会触发一个函数，该函数会移除 modal 元素和 overlay 元素的 ‘hidden’ 类，以显示它们。在每次循环迭代中，我们为当前元素添加 ‘click’ 事件监听器，并在点击事件触发时执行给定的函数。● 现在我们将实现不用点击叉，点击其他外部区域也可以关闭模态窗口，很简单，我们把点击事件做到overlay这个类上面去就行了，因为overlay在按钮上层，窗口下层。● 当然上面的点击函数，我们也可以单独提取出来。
模式窗口showModalDialog的用法总结
月光宝盒的专栏
11-30 6916
    最近几天一直在处理模式窗口的问题，索性写了这篇总结，以供参考：1。打开窗口：var handle = window.showModalDialog(url, objects, feathers);其中：objects可以为参数（包括数组），也可以是对象。通常的用法 objects = {window} ，把父窗体的对象共享给子窗体。2。关闭子窗口：window.close();3。
bootstrap如何用js调用模态框_Bootstrap打开模态框 通过js的方式
weixin_29291185的博客
01-17 1971
要注意一点就是 加载的js的问题 要和jquery搭配 否则会出现modal找不到的问题那么打开模态框很简单修改调用一个方法，方法里面，可以去ajax得到数据json对象 然后给表单赋值function LoadModify(id) {$.ajax({type: "GET",url: "/cccc/modify/" + id,dataType: "json",beforeSend: functio...
JS中ShowModalDialog（模态窗口）详细使用
热门推荐
tuobayi的博客
12-23 7万+
基本介绍：           showModalDialog()         (IE 4+ 支持)           showModelessDialog()      (IE 5+ 支持)           window.showModalDialog()                  方法用来创建一个显示HTML内容的模态对话框。           window.sho
JavaScript 模态对话框与全屏窗口操作代码示例
在JavaScript中，`window.showModalDialog()`函数用于打开一个模态对话框，该对话框会阻止用户与页面其他部分的交互，直到关闭对话框。在示例中： ```javascript strFeatures="dialogWidth=500px;dialogHeight=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值