首页 > JQuery > 利用jQuery实现DIV弹出效果

利用jQuery实现DIV弹出效果

背景

       现在很多网站都流行DIV弹出式的对话框或是信息显示框,因为使用jQuery可以不费大力气实现这种效果,这里就向大家描述一下jQuery DIV弹出效果实现代码。下面请看本文的详细介绍。

jQuery DIV弹出效果实现代码

       现在很多网站都流行这种DIV弹出式的对话框或是信息显示框,很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中,与业界朋友们起分享。
       先上个效果图,可以点击Close按钮或是在遮罩层上任意处点击,就可以关闭DIV弹出层。
       

HTML代码如下:

<dividdivid='pop-div'style="width:300px"class="pop-box"> 
<h4>标题位置</h4> 
<divclassdivclass="pop-box-body"> 
<p>

       正文内容

</p> 
</div> 
<divclassdivclass='buttonPanel'style="text-align:right"style="text-align:right"> 
<inputvalueinputvalue="Close"id="btn1"onclick="hideDiv('pop-div');"type="button"/> 
</div> 
</div>

       代码很简洁。最外层是一个大的DIV作为弹出层的容器,H4作为DIV弹出层的标题,又一个DIV用于弹出层正文内容显示,再一个Div用于放置一些按钮。
CSS代码如下:

.pop-box{
z-index:9999;/*这个数值要足够大,才能够显示在最上层*/
margin-bottom:3px;
display:none;
position:absolute;
background:#FFF;
border:solid1px#6e8bde;
}

.pop-boxh4{
color:#FFF;
cursor:default;
height:18px;
font-size:14px;
font-weight:bold;
text-align:left;
padding-left:8px;
padding-top:4px;
padding-bottom:2px;
background:url("../images/header_bg.gif")repeat-x00;
}

.pop-box-body{
clear:both;
margin:4px;
padding:2px;
}

JS代码如下:

functionpopupDiv(div_id){
  vardiv_obj=$("#"+div_id);
  varwindowWidth=document.documentElement.clientWidth;
  varwindowHeight=document.documentElement.clientHeight;
  varpopupHeight=div_obj.height();
  varpopupWidth=div_obj.width();
  //添加并显示遮罩层
  $("
  ").addClass("mask")
  .width(windowWidth*0.99)
  .height(windowHeight*0.99)
  .click(function(){hideDiv(div_id);})
  .appendTo("body")
  .fadeIn(200);
  div_obj.css({"position":"absolute"})
  .animate({left:windowWidth/2-popupWidth/2,
  top:windowHeight/2-popupHeight/2,opacity:"show"},"slow");
}
functionhideDiv(div_id){
  $("#mask").remove();
  $("#"+div_id).animate({left:0,top:0,opacity:"hide"},"slow");
}

除非注明,文章为IT热血青年原创,欢迎转载!转载请注明本文地址,谢谢。
本文地址:http://blog.itblood.com/to-utilizing-jquery-div-pop-up-effect.html

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.