大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“怎么用jQuery代码实现DIV弹出效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用jQuery代码实现DIV弹出效果”吧!
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比西宁网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式西宁网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖西宁地区。费用合理售后完善,10年实体公司更值得信赖。
jQuery DIV弹出效果实现代码
现在很多网站都流行这种DIV弹出式的对话框或是信息显示框,很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中,与业界朋友们起分享。
先上个效果图,可以点击Close按钮或是在遮罩层上任意处点击,就可以关闭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(); //添加并显示遮罩层 $("
到此,相信大家对“怎么用jQuery代码实现DIV弹出效果”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!