JSP页面弹出模态窗口

JavaScript026

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代码,因为模态窗口主要是需要写好兼容的CSS代码段儿。还有你的模态窗口初始化是否做了什么特殊的处理,你可以先将这些处理注释掉,然后试试看空的窗口显示是否正常,一次来判断js代码是否存在效率或是不兼容的问题。

用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>