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>