【Demo】js弹出层_弹出层demo-CSDN博客

前两天为做弹出遮罩层的效果，找了一个Demo，依葫芦画瓢完成了。Demo记录如下，以便以后再来画瓢：

（注：

1、需要先下载jquery-1.5.js ，1.3版本也行，原Demo上就是1.3的；

2、closeBg();的返回值调用showBg()函数是获取不到的，当时做了一个弹出确认层的效果，用户点击确定后，关闭层，提交表单；点击取消后，不提交表单，关闭层。当时是用closeBg();返回一个boolean值，但是调用 showBg()的函数怎么都获取不到返回值，后来想明白了，closeBg();是点击事件触发的，不是closeBg(),因此返回值不会给showBg()函数，showBg()函数自然也就没有值可以传给调用它的函数了。-- 有些绕，简单的做法：closeBg();实现关闭层的功能，点击“确定”后，关闭层，然后用：document.form1.submit(); 的方式手动提交表单。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS遮罩层效果，支持ie firefox jQuery遮罩层</title> <mce:script type="text/javascript" src="jquery-1.5/jquery-1.5.js" mce_src="jquery-1.5/jquery-1.5.js"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">*{ font-family:Arial, Helvetica, sans-serif; font-size:12px; } #fullbg{ background-color: Gray; display:none; z-index:3; position:absolute; left:0px; top:0px; filter:Alpha(Opacity=30); /* IE */ -moz-opacity:0.4; /* Moz + FF */ opacity: 0.4; } #dialog { position:absolute; width:200px; height:200px; background:#F00; display: none; z-index: 5; } #main { height: 1500px; }</style> </head> <body> <div id="main"> <a href="#rhis" mce_href="#rhis" οnclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a> </div>  <div id="fullbg"></div>   <div id="dialog"> <div id="dialog_content"></div> <div style="text-align: center;" mce_style="text-align: center;"><a href="#" mce_href="#" οnclick="closeBg();">关闭</a></div> </div>  </body> </html>