`
yyyccc4000
  • 浏览: 6065 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

window.open 模拟模态窗口效果

阅读更多

在Web软件开发过程中,经常会需要弹出一个窗口,并且在子窗口和父窗口之间通信,并且子窗口要能锁住父窗口。比较常见的是window.showModalDialog(),这种方法有很多局限性,比如窗口之间的通信不方便,只在ie下有效等。如果采用window.open()的方式,子窗口又不能锁住父窗口。网上有许多通过层来屏蔽父窗口的例子,但是也都没能完全锁定父窗口。经过考虑,楼主我决定采用一种变通的办法:锁定父窗口-> 阻止父窗口获得焦点->当父窗口获得焦点时,将焦点转移到子窗口。

代码如下:

父窗口网页parent.html:

<html>
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>无标题文档</title>  
<script language="javascript">  
 window.onfocus = function focus(){//重写父窗口window对象中的onfocus,使其在获得焦点时执行以下代码   
  if( typeof(window.childWindow)!="undefined"){//如果子窗口存在,将焦点转到子窗口   
   window.childWindow.focus();   
  }   
 }   
 function showChild(){   
  
//打开一个子窗口,并将子窗口的引用保存在父窗口window的childWindow属性中   
 window.childWindow = window.open("child.html","child","width=300px,height=110px,resizable=no,scroll=no,status=no");   
  window.childWindow.focus();   
 }   
</script>  
</head>  
  
<body>  
<input name="btn_show" type="button" value="显示子窗口" onclick="showChild()" />  
<input name="btn_alert" type="button" value="显示其他" onclick="alert('被调用了')" />  
</body>  
</html>

 

   

子窗口网页 child.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
	window.onunload = function unload(){
		window.opener.childWindow = undefined;
	}
</script>
</head>
<body>
这是子窗口!
</body>
</html>

  

1
0
分享到:
评论
1 楼 Aubergine_kang 2011-11-15  
楼主用firefox试下,不管用,锁定不住父窗口的

相关推荐

    ShowModalDialog与window.open的区别

    - 对于需要跨浏览器兼容的应用,推荐使用 `window.open`,并根据需求通过其他技术(如 CSS、JavaScript 库等)模拟模态对话框的行为。 总的来说,虽然 `ShowModalDialog` 在某些场景下提供了更强大的功能,但由于其...

    SJ模态窗体,WIndow.Open小实例

    同时,为了模拟模态效果,我们需要在主窗口中阻止用户对其他元素的交互,这通常通过CSS样式或者JavaScript事件处理来实现。 在提供的文件列表中,我们看到有多个以`.aspx`和`.aspx.cs`为扩展名的文件。`.aspx`文件...

    js实现window.open不被拦截的解决方法汇总

    文章中提到了几种实现 `window.open()` 方法不被浏览器拦截的解决方法,其中包括新建 `a` 标签模拟点击、使用 `window.showModalDialog()` 方法和使用 `setTimeout()` 与 `window.open()` 结合的方式。 1. 新建 `a`...

    Window.ShowModalDialog使用手册

    开发者更倾向于使用`window.open()`配合`display: none`的CSS和JavaScript来模拟模态对话框,或者使用Bootstrap、jQuery UI等库提供的模态插件。 总的来说,虽然`Window.showModalDialog()`在某些场景下仍可能有其...

    'window.ShowModalDialog'在Chrome中不起作用

    `window.open()` 可以创建一个新的浏览器窗口或者打开一个已经存在的窗口,并且可以设置新窗口的各种属性,如位置、大小、是否显示工具栏等。虽然它不能直接提供与 `showModalDialog()` 相同的模态效果,但可以通过...

    使用selenium测试showModalDialog模态对话框

    这段代码首先定义了一个JavaScript字符串,用于重写 `showModalDialog` 方法,将其替换为 `window.open` 函数,这样对话框将以非模态窗口的形式打开,Selenium 就可以继续执行并选中这个新窗口。然后,代码模拟点击...

    js open() 与showModalDialog()方法使用介绍

    因此在开发时,推荐使用更加标准化的 HTML5 和 JavaScript 功能来实现模态对话框,如使用对话框 API 或者利用 CSS 和 JavaScript 来自定义模态窗口。 综上所述,open() 和 showModalDialog() 方法在不同的场景下...

    showModalDialog模态对话框的使用详解以及浏览器兼容

    由于这种不一致性,开发人员通常需要寻找替代方案,例如使用CSS和JavaScript模拟模态对话框,以确保跨浏览器的兼容性和一致的用户体验。例如,可以使用Bootstrap的Modal组件,或者其他JavaScript库如jQuery UI或...

    JS中表单的使用小结

    而通过window.showModalDialog()打开的模态窗口,则需要使用window.dialogArguments.location.reload()方法。 接下来,文章阐述了JavaScript中如何弹出窗口,这里有两种常见的方法:window.open()和window....

    谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

    对于Chrome浏览器,它会使用`window.open()`并传递同样的参数,以创建一个不可最小化、无工具栏和菜单栏的窗口,从而达到模态对话框的效果。 此外,`showModalDialog()`返回的`returnValue`在Chrome中无法获取,但...

    谷歌浏览器不支持showModalDialog模态对话框的解决方法

    为了解决这个问题,开发者找到了一个替代方案,即使用`window.open`函数来模拟模态对话框的效果。 `window.open`函数可以打开一个新的浏览器窗口或标签,通过设置参数,如"height", "width", "status", "toolbar", ...

    javaScript聊天窗口

    在使用 `window.open()` 或者 `showModalDialog()` 打开子窗口后,有时候需要在关闭子窗口后刷新父窗口。这里提供两种方法: 1. **使用 `window.open()` 打开的窗口**: ```javascript window.opener.location....

    javascript网页对话框.docx

    需要注意的是,由于弹出窗口可能被视为侵入性的用户体验,现代Web设计倾向于使用模态HTML元素(如`&lt;dialog&gt;`)或JavaScript库(如jQuery UI)来模拟对话框效果,以避免浏览器的弹出窗口阻止机制。同时,`...

    open 关闭子页面刷新父页面

    具体到这段代码,`showModalDialog`是一个非标准但广泛支持的方法,主要用于创建模态对话框,即阻止用户与主窗口交互直到对话框被关闭的窗口。其语法如下: ```javascript var k = window.showModalDialog(url, ...

    ie+FF通用的父子模态对话框相互传值

    父对话框通常是主页面或者已打开的一个模态窗口,而子对话框则是在父对话框之上弹出的新模态窗口。当用户在子对话框中进行操作后,可能需要将结果返回给父对话框,这就涉及到了值的传递。 在JavaScript中,我们可以...

    IE和FF兼容问题

    - **Firefox**:不支持`showModalDialog`,但可以通过`window.open`模拟模态对话框。 **示例代码**: ```javascript // 打开新窗口 var newWindow = window.open("about:blank", "dialog", "width=400,height=300")...

    Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

    首先,问题在于Chrome不会像预期那样阻止用户与父窗口交互,它实际上将`showModalDialog`当作了`window.open`方法处理,打开了一个新的非模态窗口。这使得用户可以在子窗口活动的同时操作父窗口,且`returnValue`...

Global site tag (gtag.js) - Google Analytics