jQuery 弹出层脚本

最新推荐文章于 2025-09-10 09:07:54 发布

weixin_30265103

最新推荐文章于 2025-09-10 09:07:54 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/baily/p/3807854.html

本文探讨了如何使用jQuery实现动态网页交互效果，并通过JavaScript调整页面元素布局，提升用户体验。主要内容包括创建自定义弹出窗口、页面元素的平滑过渡动画以及利用窗口大小调整布局的响应式设计。

直接贴代码：

 1 $.extend({
 2     closeBox: function (o, x, fn) {
 3         $('#' + o).fadeOut(500, function () {
 4             if (fn && typeof (fn) === "function") { fn(); }
 5         });
 6         if ($('#v_overlay')[0]) { $('#v_overlay').fadeOut(650, function () { $(this).remove(); }); }
 7     },
 8     openBox: function (o, x, fn) {
 9         $.init(o, x, fn); $('#' + o).fadeIn(500);
10     },
11     init: function (o, x, fn) {
12         var w = $(window).width(), h = $(window).height();
13         var bw = $("#" + o).width(), bh = $("#" + o).height();
14         var _top = ((h / 2 - bh / 2) - 50);
15         var boxCss = { "left": ((w / 2 - bw / 2) + "px"), "top": ((_top > 0 ? _top : 10) + "px"), "z-index": "999", "position": "fixed" };
16         $("#" + o).css(boxCss);
17         try {
18             if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
19                 $("#" + o).css("position", "absolute"); location.href = location.href.search(/\?/) > 0 ? location.href.substring(0, location.href.indexOf('#')) : location.href + "#";
20             }
21             if ((window.innerHeight - 40) <= $("#" + o).height()) {
22                 $("#" + o).css({ "position": "absolute", "top": (40 + window.scrollY) });
23             }
24         } catch (e) { }
25         if (x != undefined && $("body").find("#v_overlay").html() == null) {
26             var boxBg = "<div id=\"v_overlay\" style=\"position:absolute;background-color:#000;filter:alpha(opacity=30);opacity:0.3;width:100%;left:0;top:0;z-index:998;border:none;display:none\"></div>";
27             $(boxBg).click(function () { $.closeBox(o, x); }).height($(document).height()).appendTo("body").fadeIn();
28         }
29         $(window).resize(function () {
30             if ($("#" + o).css("display") == "block") {
31                 $('#v_overlay').remove(); $.init(o, x);
32             }
33         });
34     }
35 });