四川盐亭网站制作公司

怎么用jQuery代码实现DIV弹出效果

本篇内容主要讲解“怎么用jQuery代码实现DIV弹出效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用jQuery代码实现DIV弹出效果”吧!

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比西宁网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式西宁网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖西宁地区。费用合理售后完善，10年实体公司更值得信赖。

jQuery DIV弹出效果实现代码

现在很多网站都流行这种DIV弹出式的对话框或是信息显示框，很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中，与业界朋友们起分享。

先上个效果图，可以点击Close按钮或是在遮罩层上任意处点击，就可以关闭DIV弹出层。

怎么用jQuery代码实现DIV弹出效果

HTML代码

代码如下:

 
标题位置
  

正文内容

 
   
 

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

CSS代码

代码如下:

.pop-box{  z-index:9999;/*这个数值要足够大，才能够显示在最上层*/  margin-bottom:3px;  display:none;  position:absolute;  background:#FFF;  border:solid1px#6e8bde;  }   .pop-boxh5{  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");  }

到此，相信大家对“怎么用jQuery代码实现DIV弹出效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


网页标题：怎么用jQuery代码实现DIV弹出效果
转载注明：http://scyanting.com/article/iesech.html

其他资讯