代码源自网络,并自己整理吸收,调试通过
IE可以用showModalDialog方法打开模态窗口。
FF为了安全,执行方法window.open('openwin.html','newWin','modal=yes,width=200,height=200,resizable=no,scrollbars=no');
指定了modal=yes,打开的也不是模态窗口,是普通窗口
在IE下是模态,在FF下不是,作了最大的努力来实现通用,外观到是还可以。
打开对话框的方法如下:
function openModal()
{
popupDialog('child.html',200,200);
}
function showMsg(obj)
{
alert(obj);
}
function popupDialog(url,width,height)
{
var x = parseInt(screen.width / 2.0) - (width / 2.0);
var y = parseInt(screen.height / 2.0) - (height / 2.0);
var isMSIE= (navigator.appName == "Microsoft Internet Explorer"); //判断浏览器
if (isMSIE)
{
retval = window.showModalDialog(url, window, "dialogWidth:"+width+"px; dialogHeight:"+height+"px; dialogLeft:"+x+"px; dialogTop:"+y+"px; status:no; directories:yes;scrollbars:no;Resizable=no; " );
}
else
{
var win = window.open(url, "mcePopup", "top=" + y + ",left=" + x + ",scrollbars=" + scrollbars + ",dialog=yes,modal=yes,width=" + width + ",height=" + height + ",resizable=no" );
eval('try { win.resizeTo(width, height); } catch(e) { }');
win.focus();
}
}
在被打开的对话框里,代码:
function doReload()
{
var isMSIE= (navigator.appName == "Microsoft Internet Explorer");
if (isMSIE)
{
//IE
//parent.dialogArguments.location.reload();
parent.dialogArguments.showMsg("345");
}
else
{
//FF
//parent.opener.document.location.reload();
window.opener.showMsg("345");
}
//关闭窗口用的是 top.close(); 这个IE、FireFox都支持。
//top.close();
window.close();
}
两种浏览器的打开对话框的方式不一样
IE:window.showModalDialog(url, window, "dialogWidth:300px; dialogHeight:300px; dialogLeft:200px; dialogTop:200px; status:no; directories:yes;scrollbars:no;Resizable=no; " );
FireFox: window.open(url, "mcePopup", "top=200,left=200,scrollbars=no,dialog=yes,modal=yes,width=300,height=300,resizable=no" );
关闭窗口时:
window.close(); top.close(); 这个IE、FireFox都支持。
分享到:
相关推荐
【DIV模态窗口实现】是一种常见的前端网页设计技术,它允许在不离开当前页面的情况下,弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景,能够提供良好的用户体验,因为它...
在网页设计中,模态窗口(Modal Window)是一种常见的用户交互设计模式,它可以在不离开当前页面的情况下显示新的内容或进行交互操作。JQuery,一个轻量级、高性能的JavaScript库,提供了简单易用的API来实现这种...
在本篇文章中,我们将深入探讨 EasyUI 的模态窗口插件,包括其基本使用方法、配置选项以及如何实现局部模态效果。 首先,让我们了解什么是模态窗口。模态窗口是一种阻止用户与主页面交互,直到关闭该窗口为止的窗口...
在本篇中,我们将深入探讨如何使用 `div` 和 `css` 实现模态窗口,并结合 `JavaScript` 进行动态控制。 首先,我们来了解 `div` 元素。`div` 是HTML中的一个通用容器标签,用于组合HTML元素,通过设置 `class` 或 `...
在网页设计和开发中,模态窗口是一种常见的交互设计元素,它可以在用户当前操作的页面上弹出一个半透明的窗口,强制用户与其交互后才能继续进行其他操作。标题“层实现模态窗口(div)”表明我们将探讨如何使用HTML中...
总的来说,C++和MFC提供了强大的工具来实现非模态窗口,通过合理的代码组织和设计,可以创建出功能丰富且用户友好的非模态窗口应用。在实际开发中,要根据项目需求灵活运用这些技术,同时关注用户体验和性能。
在网页开发中,模态窗口是一种常见的用户界面元素,用于在不离开当前页面的情况下向用户展示信息或收集输入。本文将深入探讨如何使用HTML、CSS以及JavaScript创建和管理模态窗口,特别是针对Internet Explorer(IE)...
而模态窗口(Modal Window)是网页设计中常用的一种用户界面元素,它可以在不离开当前页面的情况下显示额外的信息或功能,比如警告、确认对话框或者展示详细内容。下面我们将详细探讨如何利用jQuery实现模态窗口,...
由于`window.showModalDialog()`仅限于IE浏览器,且在现代Web开发中已不再推荐使用,我们需要寻找替代方案来确保模态窗口在所有浏览器中的正常工作。 1. **使用Polyfill**:对于老旧的浏览器,可以使用Polyfill库来...
在JavaScript的世界里,实现图表和模态窗口是两个常见的任务,它们在网页交互和数据可视化中扮演着重要的角色。下面将分别对这两个知识点进行详细阐述。 首先,让我们深入了解一下**js实现图表**。在Web开发中,...
根据给定文件的信息,本文将围绕“分页后弹出模态窗口刷新父窗口”的主题进行深入探讨。此话题主要涉及前端开发中的交互设计、页面更新机制以及如何在不同的页面间进行数据同步等内容。 ### 一、理解分页与模态窗口...
总的来说,实现"ie+FF通用的父子模态对话框相互传值"涉及到JavaScript的事件处理、跨窗口通信和CSS的模态设计。理解这些知识点并熟练运用,能帮助开发者创建出更好的交互体验。同时,要时刻关注浏览器的兼容性和最佳...
在 ASP.NET 中,实现模态窗口可以通过使用 `showModalDialog` 和 `showModelessDialog` 两个方法。这些方法可以用来创建一个显示 HTML 内容的模态或非模态对话框。 showModalDialog 方法 `showModalDialog` 方法...
模态窗口在软件开发中是一种常见的用户界面设计元素,它是一种特殊的窗口,当模态窗口出现时,用户必须先与该窗口交互,处理完其中的任务,才能继续操作应用程序的其他部分。这种窗口强制用户按照特定的流程进行操作...
JavaScript的模态窗口是网页开发中常用的一种交互设计,它可以在用户进行其他操作时暂停页面流程,强制用户关注特定信息或执行某个操作。模态窗口通常由一个覆盖在主页面上的半透明背景(通常称为“mask”)和一个...
在这个“19种漂亮的模态窗口效果”中,我们可以预见到一系列使用jQuery实现的创新和吸引人的交互式模态窗口设计。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画制作,使得创建动态和...
4. **避免过度使用**:模态窗口应仅用于关键操作,而不是常规页面导航。 通过理解这些基本概念和实践,开发者可以有效地利用jQuery创建功能强大且用户体验良好的模态窗口。无论选择jQuery UI还是自定义实现,关键...
java多级模态窗口java多级模态窗口java多级模态窗口java多级模态窗口java多级模态窗口java多级模态窗口java多级模java多级模态窗口java多级模态窗口java多级模态窗口java多级模态窗口java多级模态窗口java多级模态...
在网页开发中,模态窗口(Modal Window)是一种常见的用户交互设计,用于在当前页面上弹出一个半透明的窗口,使用户必须与其交互才能继续操作。本文将详细介绍三种使用JavaScript实现模态窗口的方法,这些方法具有可...