模态窗口详解及各浏览器适配经验分享

[概念 - 摘自百度]

模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。一般来说，Windows应用程序中，对话框分为模态对话框和非模态对话框两种。二者的区别在于当对话框打开时，是否允许用户进行其他对象的操作

[讲解 - 个人经验]

Java Web开发中，不少会用到模态窗口。

大致可分为：window.open 和 window.showdialog两类。

首先对此方法的参数进行了解。

参数解释：   
window.open 弹出新窗口的命令；   
page.html 弹出新窗口的文件名；   
newwindow 弹出窗口的名字（不是文件名），可用空 ″代替；   
height=100 窗口高度；   
top=0 窗口距离屏幕上方的像素值；   
left=0 窗口距离屏幕左侧的像素值；   
toolbar=no 是否显示工具栏，yes为显示；   
menubar,scrollbars 表示菜单栏和滚动栏；   
resizable=no 是否允许改变窗口大小，yes为允许；   
location=no 是否显示地址栏，yes为允许；   
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

[程序 - 实战可用]

父页面

//父页面调用方法，通过按钮点击事件可绑定如下方法打开模态窗口
function openDialog (){
	var returnValue="";
	if(navigator.userAgent.indexOf("Chrome") >0 ){  
        //当判断为谷歌浏览器内核时。（同时适用于360浏览器，搜狗浏览器）
		var hasSuccess = false;
		
                var url = "XXX.jsp";//模态窗口需要启动的JSP页面
			
                var winOption = "height="+800+",width="+1000+",top=50,left=50,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,fullscreen=0";  
		var winOpen=window.open(url,"_blank",winOption);

                //设置Timer监听子页面关闭事件
		var timer=window.setInterval(function(){
			if(winOpen.closed==true){
				if(winOpen.returnValue!=null && winOpen.returnValue == "success" && hasSuccess == false){
					hasSuccess = true;
                                        //你的业务代码段，作者业务为获取子界面执行结果，刷新父界面内部JQgrid表格
                                       //$("#table_list_1").trigger("reloadGrid");
					return;
				}
			}
		});  
	}  
	else{  
        //火狐浏览器，IE11浏览器将执行此代码段打开模态窗口，同时根据returnValue可获取子页面传值。

                var url = "XXX.jsp";//模态窗口需要启动的JSP页面

  var feature="dialogWidth:1000px;dialogHeight:800px;status:no;help:no"; returnValue = window.showModalDialog(url,self,feature); }if(returnValue.length>0){

                //你的业务代码段，作者业务为获取子界面执行结果，刷新父界面内部JQgrid表格
               //$("#table_list_1").trigger("reloadGrid");

 }};

子页面

//在子页面关闭窗口的业务逻辑代码中加入下述代码段（作业用的前台框架是Bootstrap，仅供参考）

bootbox.alert({ 
	size: "small",
	title: "提示",
	message: "更新企业信息成功！",
	callback: function() {  
		returnMessage.push("success");
		rtnValue();
		window.close();
		 }
	});


//此方法为设置window.returnValue，可在JS代码段外层定义
function rtnValue(){
    window.returnValue = returnMessage;
}

模态窗口详解及各浏览器适配经验分享

猜你喜欢