JSP页面弹出模态窗口

JavaScript013

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。

用CSS和JS改变z-index的属性值就可以实现模态框

[html] view plain copy

<html>

<head>

<title>modal box</title>

<style type="text/css">

*{

margin:0px

padding:0px

}

</style>

</head>

<body>

<!--先在CSS里面把zindex的值设为负值让其在背景图片后面-->

<div style="background:url(http://pic.90sjimg.com/back_pic/00/04/27/49/5b1eee8bdba7b9aefc62fccafe72737c.jpg)width:100%height:800pxz-index:1">

<button id="modal-box">弹框</button>

<div id="modal-show" style="position:fixedz-index:-9999width:100%height:100%background-color:rgba(236, 214, 214, 0.2)">

</div>

<div id="modal-show2" style="position:fixedz-index:-9999width:30%height:30%margin:200px autoborder:1px solid red">

欢迎你登录

</div>

</div>

<script type="text/javascript">

document.getElementById("modal-box").onclick=function()//点击按钮改变zIndex的值为1让模态框在背景图的前面

{

document.getElementById("modal-show").style.zIndex = "1"

document.getElementById("modal-show2").style.zIndex = "1"

}

document.getElementById("modal-show").onclick=function()//点击模态框的透明背景时，模态框的zIndex值变为-9999，会隐藏在

{<span style="white-space:pre"></span>背景图片的后面，点击模态框本身是不会消失的<span style="white-space:pre">

</span>

this.style.zIndex = "-9999"

document.getElementById("modal-show2").style.zIndex = "-9999"

}

</script>

</body>

</html>