JSP页面弹出模态窗口

JavaScript012

JSP页面弹出模态窗口,第1张

jsp中的模态窗口是通过调用js方法弹出的。

js中的弹出方法:

<script type="text/javascript">

function openWin(src, width, height, showScroll){

window.showModalDialog (src,"","location:Nostatus:Nohelp:NodialogWidth:"+width+"dialogHeight:"+height+"scroll:"+showScroll+"")

}

</script>

参数说明：

sURL -- 必选参数，类型：字符串。用来指定对话框要显示的文档的URL。

vArguments-- 可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过

window.dialogArguments来取得传递进来的参数。

sFeatures -- 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“”隔开。

----------------

1.dialogHeight:对话框高度，不小于100px

2.dialogWidth:对话框宽度。

3.dialogLeft: 离屏幕左的距离。

4.dialogTop: 离屏幕上的距离。

5.center: { yes | no | 1 | 0 } ： 是否居中，默认yes，但仍可以指定高度和宽度。

6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。

7.resizable: {yes | no | 1 | 0 } [IE5+]： 是否可被改变大小。默认no。

8.status: {yes | no | 1 | 0 } [IE5+]： 是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

9.scroll:{ yes | no | 1 | 0 | on | off }：是否显示滚动条。默认为yes。

下面几个属性是用在HTA中的，在一般的网页中一般不使用。

10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。

11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。

12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

模态和非模态的区别在于，模态窗体弹出后需要将其窗体关闭后才能进行除该窗体以外的其他操作，通俗点说就是除了该窗体上的操作，其他的操作都无效

原生JS用法：

模态：window.showModalDialog（非标准）

非模态：window.showModelessDialog（IE5+，非标准），window.open（所有浏览器，标准）

不推荐使用以上三种方法实现模态窗体，原因有二：

一是以上方法在各个浏览器上表现各不一样，不一定能兼容所有主流浏览器（未测试，但我知道肯定不行）

二是如今大多数现代浏览器会屏蔽掉弹出窗体，会给您实现功能造成极大的障碍

使用JS模拟弹出窗体：

使用层（一般是div）模拟一个窗体，将其放置在所有层之上，加上希望的功能，比如close,resize等等，其中的内容如果是其他页面，我们可以用iframe，这些都很灵活，可以自己定义规则，这样就形成了一个非模态窗体。

在上面的基础上，在窗体层下放置一个mask层，其作用在于不让操作除窗体层以外的内容，最后将mask层设置为深色并且半透明，这样就形成了一个模态窗体了。

以上只是原理，毕竟自己来做很恼火，当今主流js框架都实现了类似的功能，比如jQuery,ext等，用法也很简单，也很兼容各种主流浏览器，所以使用js框架来实现是最推荐的

希望对您有帮助~

By Billskate