使用jQuery实现DIV弹出效果
2009-06-03 11:23
786 查看
现在很多网站都流行这种弹出式的对话框或是信息显示框,很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中,与业界朋友们起分享。
先上个效果图,可以点击Close按钮或是在遮罩层上任意处点击,就可以关闭弹出层。
HTML代码
代码很简洁。最外层是一个大的DIV作为弹出层的容器,H4作为弹出层的标题,又一个DIV用于弹出层正文内容显示,再一个Div用于放置一些按钮。
CSS代码
JS代码
先上个效果图,可以点击Close按钮或是在遮罩层上任意处点击,就可以关闭弹出层。
HTML代码
<div id='pop-div' style="width: 300px" class="pop-box" > <h4>标题位置</h4> <div class="pop-box-body" > <p> 正文内容 </p> </div> <div class='buttonPanel' style="text-align: right" mce_style="text-align: right"> <input value="Close" id="btn1" onclick="hideDiv('pop-div');" type="button" /> </div> </div>
代码很简洁。最外层是一个大的DIV作为弹出层的容器,H4作为弹出层的标题,又一个DIV用于弹出层正文内容显示,再一个Div用于放置一些按钮。
CSS代码
.pop-box { z-index: 9999; /*这个数值要足够大,才能够显示在最上层*/ margin-bottom: 3px; display: none; position: absolute; background: #FFF; border:solid 1px #6e8bde; } .pop-box h4 { 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-x 0 0; } .pop-box-body { clear: both; margin: 4px; padding: 2px; }
JS代码
function popupDiv(div_id) { var div_obj = $("#"+div_id); var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = div_obj.height(); var popupWidth = div_obj.width(); //添加并显示遮罩层 $("<div id='mask'></div>").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"); } function hideDiv(div_id) { $("#mask").remove(); $("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow"); }
相关文章推荐
- 使用jQuery实现页面定时弹出广告效果
- jQuery使用drag效果实现自由拖拽div
- 使用jQuery的easydrag插件实现可拖动的DIV弹出框
- 使用jquery实现弹出层效果
- 使用jQuery实现弹出框效果
- jquery使用div实现滚动条效果
- jquery 在指定位置弹出div框并实现DIV由下向上展开的效果
- jQuery使用drag效果实现自由拖拽div
- 使用jquery实现弹出窗口效果(居中、左下角、右下角)
- jquery 在指定位置弹出div框并实现从下向上展开效果
- jQuery DIV弹出效果实现代码
- jQuery DIV弹出效果实现代码
- 使用Jquery实现页面加载时的遮罩效果
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 使用jQuery加DIV实现可以动态添加的金字塔结构
- jquery用div实现下拉列表的效果
- jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
- jQuery实现弹出居、右下角、左下角窗口效果(二)
- 使用javacript和div实现Tab切换效果
- 使用jquery实现DIV动画移动