`

模态窗口,在IE下是模态,在FF下不是模态,作了最大的努力来实现通用

阅读更多

代码源自网络,并自己整理吸收,调试通过

 

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模态窗口实现

    【DIV模态窗口实现】是一种常见的前端网页设计技术,它允许在不离开当前页面的情况下,弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景,能够提供良好的用户体验,因为它...

    Jquery实现模态窗口效果

    在网页设计中,模态窗口(Modal Window)是一种常见的用户交互设计模式,它可以在不离开当前页面的情况下显示新的内容或进行交互操作。JQuery,一个轻量级、高性能的JavaScript库,提供了简单易用的API来实现这种...

    easyui 模态窗口插件

    在本篇文章中,我们将深入探讨 EasyUI 的模态窗口插件,包括其基本使用方法、配置选项以及如何实现局部模态效果。 首先,让我们了解什么是模态窗口。模态窗口是一种阻止用户与主页面交互,直到关闭该窗口为止的窗口...

    div css窗口 模态窗口

    在本篇中,我们将深入探讨如何使用 `div` 和 `css` 实现模态窗口,并结合 `JavaScript` 进行动态控制。 首先,我们来了解 `div` 元素。`div` 是HTML中的一个通用容器标签,用于组合HTML元素,通过设置 `class` 或 `...

    层实现模态窗口(div)

    在网页设计和开发中,模态窗口是一种常见的交互设计元素,它可以在用户当前操作的页面上弹出一个半透明的窗口,强制用户与其交互后才能继续进行其他操作。标题“层实现模态窗口(div)”表明我们将探讨如何使用HTML中...

    C++非模态窗口实现

    总的来说,C++和MFC提供了强大的工具来实现非模态窗口,通过合理的代码组织和设计,可以创建出功能丰富且用户友好的非模态窗口应用。在实际开发中,要根据项目需求灵活运用这些技术,同时关注用户体验和性能。

    html 模态窗口使用

    在网页开发中,模态窗口是一种常见的用户界面元素,用于在不离开当前页面的情况下向用户展示信息或收集输入。本文将深入探讨如何使用HTML、CSS以及JavaScript创建和管理模态窗口,特别是针对Internet Explorer(IE)...

    5个Jquery模态窗口

    而模态窗口(Modal Window)是网页设计中常用的一种用户界面元素,它可以在不离开当前页面的情况下显示额外的信息或功能,比如警告、确认对话框或者展示详细内容。下面我们将详细探讨如何利用jQuery实现模态窗口,...

    模态窗口解决方案

    由于`window.showModalDialog()`仅限于IE浏览器,且在现代Web开发中已不再推荐使用,我们需要寻找替代方案来确保模态窗口在所有浏览器中的正常工作。 1. **使用Polyfill**:对于老旧的浏览器,可以使用Polyfill库来...

    js实现图表及模态窗口

    在JavaScript的世界里,实现图表和模态窗口是两个常见的任务,它们在网页交互和数据可视化中扮演着重要的角色。下面将分别对这两个知识点进行详细阐述。 首先,让我们深入了解一下**js实现图表**。在Web开发中,...

    分页后弹出模态窗口刷新父窗口

    根据给定文件的信息,本文将围绕“分页后弹出模态窗口刷新父窗口”的主题进行深入探讨。此话题主要涉及前端开发中的交互设计、页面更新机制以及如何在不同的页面间进行数据同步等内容。 ### 一、理解分页与模态窗口...

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

    总的来说,实现"ie+FF通用的父子模态对话框相互传值"涉及到JavaScript的事件处理、跨窗口通信和CSS的模态设计。理解这些知识点并熟练运用,能帮助开发者创建出更好的交互体验。同时,要时刻关注浏览器的兼容性和最佳...

    ASP.NET模态窗口的实现

    在 ASP.NET 中,实现模态窗口可以通过使用 `showModalDialog` 和 `showModelessDialog` 两个方法。这些方法可以用来创建一个显示 HTML 内容的模态或非模态对话框。 showModalDialog 方法 `showModalDialog` 方法...

    模态窗口的程序

    模态窗口在软件开发中是一种常见的用户界面设计元素,它是一种特殊的窗口,当模态窗口出现时,用户必须先与该窗口交互,处理完其中的任务,才能继续操作应用程序的其他部分。这种窗口强制用户按照特定的流程进行操作...

    JavaScript 的模态窗口

    JavaScript的模态窗口是网页开发中常用的一种交互设计,它可以在用户进行其他操作时暂停页面流程,强制用户关注特定信息或执行某个操作。模态窗口通常由一个覆盖在主页面上的半透明背景(通常称为“mask”)和一个...

    19种漂亮的模态窗口效果

    在这个“19种漂亮的模态窗口效果”中,我们可以预见到一系列使用jQuery实现的创新和吸引人的交互式模态窗口设计。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画制作,使得创建动态和...

    jquery 模态窗口

    4. **避免过度使用**:模态窗口应仅用于关键操作,而不是常规页面导航。 通过理解这些基本概念和实践,开发者可以有效地利用jQuery创建功能强大且用户体验良好的模态窗口。无论选择jQuery UI还是自定义实现,关键...

    java多级模态窗口java多级模态窗口

    java多级模态窗口java多级模态窗口java多级模态窗口java多级模态窗口java多级模态窗口java多级模态窗口java多级模java多级模态窗口java多级模态窗口java多级模态窗口java多级模态窗口java多级模态窗口java多级模态...

    js实现模态窗口的3种方式

    在网页开发中,模态窗口(Modal Window)是一种常见的用户交互设计,用于在当前页面上弹出一个半透明的窗口,使用户必须与其交互才能继续操作。本文将详细介绍三种使用JavaScript实现模态窗口的方法,这些方法具有可...

Global site tag (gtag.js) - Google Analytics