以前做过弹出框 但都是那还总alter弹出的小窗口,现在很不好用,大部分都是弹出一个面板,并且是显示页面中间,随着滚动条的滚动,div面板始终会在页面中间显示。下面那我们来看看代码:
首先,先把jsp页面的代码归置好:
<a href="javascript:void(0)" οnclick="ShowDiv('MyDiv','fade')">点击显示面板</a>
<div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content" >
<div class="popbox">
<span class="poptit">标题</span><span class="close-but" οnclick="CloseDiv('MyDiv','fade')"><img src="style/images/close-but.png" /></span>
</div>
<div class="clear"></div>
<div class="popcontent">
<form action="addnews" method="post" name="onlinemodel" id="form1">
<table class="table-noborder">
<tr>
<td class="ri"><span class="red"> * </span>联系人:</td>
<td><input type="text" size="47" /></td>
</tr>
</table>
<div class="clearfix"></div>
<div class="but-box">
<span class="ml20"><a href="#" class="btn-gray" name="closenew" οnclick="closenew()" >取消</a></span>
</div>
<div class="clear"></div>
</form>
</div>
</div>
紧接着写事件代码:
<script language="javascript" type="text/javascript">
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
$("#"+bg_div).height($(document).height());
};
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
最后用美化一下,这样是是根据我自己当时的需求写的,可能有的你估计用不到,既然看到这里,说明你对样式还是略懂的,自己看着增减吧:
.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: #999;z-index:1001;-moz-opacity: 0.7;opacity:.70;filter: alpha(opacity=70);}
.white_content {display: none;position: absolute;top: 18%;left: 24%;width:52%;height: 50%;background-color: white;z-index:1002;
margin-left:-20px!important;/* FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/* FF IE7 该值为本身高的一半 */
margin-top:0px;
position:fixed!important;/* FF IE7 */
position:absolute;/* IE6 */
}
.popbox{ width:100%; height:40px; margin:0; padding:0;overflow:hidden; background:url(../images/dialog-title.jpg) left top no-repeat;border:0;}
.popcontent{background-color:#fff;}
.close-but{ float:right; margin:12px 5px 5px 10px;text-align:center; cursor:pointer;}
.poptit{float:left; padding:10px; color:#fff; font-size:14px; font-weight:bold;}
.but-box{text-align:center; padding:10px 15px;}