JavaScript实现模态对话框

Posted royal_coffee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript实现模态对话框相关的知识,希望对你有一定的参考价值。

 

 

今天哈尔滨今日图灵学校的朋友谈起js实现模态窗口,看俺是孤陋寡闻,

遂演示了一番,原来不就是弹窗对话框之类的么!!javascript不是用window.open实现 
么,刚发表一番言论 发现不对 这不是一个简单的网页对话框,我无法让它最大 
化...,纵观这些功能非常适合针对B/s结构应用程序的开发 

抽空查了一下资料如梦方醒,这里整理如下 


首先,来说一下对话框 
对话框在Windows应用程序中使用非常普遍,许多应用程序的设定,与用户交互需 
要通过对话框来进行,因此对话框是Windows应用程序中最重要的界面元素之一, 
是与用户交互的重要手段。对话框是一个特殊的窗口,任何对窗口进行的操作( 
如移动、最大化、最小化等)也可以在对话框实施。 

对话框大致可以分为以下两种。 

(1)模态对话框:模态对话框弹出后,独占了系统资源,用户只有在关闭该对话 
框后才可以继续执行,不能够在关闭对话框之前执行应用程序其他部分的代码。 
模态对话框一般要求用户做出某种选择。 

(2)非模态对话框:非模态对话框弹出后,程序可以在不关闭该对话框的情况下 
继续执行,在转入到应用程序其他部分的代码时可以不需要用户做出响应。非模 
态对话框一般用来显示信息,或者实时地进行一些设置。 

模态窗口在传统编程语言中很常见,简单的说就是,如果是模态的,就是打开一 
个子窗口,如果这个子窗口不关闭,就不能操作它的父窗口,原来程序暂停执行 
,直到这个模态窗口关闭后才回到原来程序继续。 

非模态的就是直接显示出来,然后原来的程序继续执行下面的语句,而且其他窗 
口也呈可用状态。 

模态对话框独占了用户的输入,当一个模态对话框打开时,用户只能与该对话框 
进行交互,而其他用户界面对象收不到输入信息。应用程序用到的大部分对话框 
都是模态对话框。 
通常浏览器中windwo.open或超链接弹出的新窗口就是非模式窗口,而模式窗口是 
类似alert那种必须关闭才能响应其他事件的窗口。 

明白了对话框的模态和非模态,来看下边 

在B/s结构应用程序的开发中,有时我们会希望使用者按下按钮后开启一个保持在 
原窗口前方的子窗口, 
在IE中,我们可以使用 
window.showModelessDialog()方法用来创建一个显示html内容的非模态对话框。 
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于 
是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。 


这里是window.showModalDialog弹出窗口的一个实例函数:  

<script type="text/javascript">   
function openWin(src, width, height, showScroll){   
window.showModalDialog  
(src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeig  
ht:"+height+";scroll:"+showScroll+";");   
}   
</script>  

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



需要注意的是FireFox浏览器中不支持showmodaldialog() ,这是因为在最初  
MozillaSuite 中(Firefox 是从这个套件衍生),是支持 showmodaldialog()  
的,不过后来发现 showmodaldialog() 存在安全隐患,不久后就取消了对  
showmodaldialog() 的支持,这个事情还发生在 bug 194404 提交前。在想出更 
好的解决方案前,相信 Firefox 是不会提供对 showmodaldialog() 的支持的。 

打开弹窗只能使用window.open实现这样的功能,window.open的语法如下 :  
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])  

只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,要让 
FireFox下开启的窗口跟IE的showModalDialog一样的话, 
只要在sFeatures中加个modal=yes就可以了,也许可能是出于安全考虑modal=yes  
打开的并不是模式窗口 
范例如下:  

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


由于在firefox没有showModalDialog方法。则用如下判断来兼容两种浏览器:  

<input type="button" value="打开对话框" οnclick="showDialog('#')"/>  
  <SCRIPT   LANGUAGE="JavaScript">  
  <!--  
  function   showDialog(url)  
  {  
   if(   document.all   ) //IE  
   {  
   feature="dialogWidth:300px;dialogHeight:200px;status:no;help:no";  
   window.showModalDialog(url,null,feature);  
   }  
   else  
   {  
     //modelessDialog可以将modal换成dialog=yes  
   feature ="width=300,height=200,menubar=no,toolbar=no,location=no,";  
   feature+="scrollbars=no,status=no,modal=yes";    
   window.open(url,null,feature);  
   }  
  }  
  //-->  
</SCRIPT>

 

以上是关于JavaScript实现模态对话框的主要内容,如果未能解决你的问题,请参考以下文章

从 javascript 用于 Web 应用程序的跨浏览器最稳定的模态对话框实现是啥?

JavaScript练习 - 模态对话框

javascript中有几种模态框

Qt 之 模态非模态半模态窗口的介绍及 实现QDialog的exec()方法

JavaFX如何实现模态窗口

Qt 销毁模态对话框