[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">d框</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>
<dl>标签定义了定义列表。如：
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
－－－－－
<dialog>标签是 HTML 5 中的新标签。
用于标签定义对话，比如交谈。
对话中的每个句子都必须属于 <dt>标签所定义的部分。请看下面的例子。
例子
<dialog>
<dt>老师</dt>
<dd>2+2 等于？</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了！</dd>
</dialog>
创建模态对话框：vReturnValue = window.showModalDialog(sURL [, vFreeArgument] [, sOrnaments])
如：window.showModalDialog("callee.htm")
创建非模态对话框：
vReturnValue = window.showModelessDialog(sURL [, vFreeArgument] [, sOrnaments])
如：window.showModelessDialog("callee.htm")
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）