jquery扩展，显示模态DIV层 (一)

最新推荐文章于 2022-05-27 11:45:11 发布

暗淡亮点

最新推荐文章于 2022-05-27 11:45:11 发布

阅读量395

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/suleil1/article/details/49471013

版权

javaScript 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

jquery扩展，显示模态DIV层：

下面是 jquery.divbox.js 内的代码：

//update at 2009年6月6日15:42:07 create
//update at 2009年6月16日13:12:23 解决IE6下select的显示问题
jQuery.fn.extend(
{
     OpenDiv: function()
     {

        var sWidth, sHeight;
         sWidth = window.screen.availWidth;
        if (window.screen.availHeight > document.body.scrollHeight)
         {
             sHeight = window.screen.availHeight;

         } else
         {
             sHeight = document.body.scrollHeight + 20;

         }
        var maskObj = document.createElement("div");
         maskObj.setAttribute('id', 'BigDiv');
         maskObj.style.position = "absolute";
         maskObj.style.top = "0";
         maskObj.style.left = "0";
         maskObj.style.background = "#111";
         maskObj.style.filter = "Alpha(opacity=70);";
         maskObj.style.opacity = "0.7";
         maskObj.style.width = sWidth + "px";
         maskObj.style.height = sHeight + "px";
         maskObj.style.zIndex = "10000";
         $("body").attr("scroll", "no");
         document.body.appendChild(maskObj);
         $("#BigDiv").data("divbox_selectlist", $("select:visible"));
         $("select:visible").hide();
         $("#BigDiv").attr("divbox_scrolltop", $.ScrollPosition().Top);
         $("#BigDiv").attr("divbox_scrollleft", $.ScrollPosition().Left);
         $("#BigDiv").attr("htmloverflow", $("html").css("overflow"));
         $("html").css("overflow", "hidden");
         window.scrollTo($("#BigDiv").attr("divbox_scrollleft"), $("#BigDiv").attr("divbox_scrolltop"));
        var MyDiv_w = this.width();
        var MyDiv_h = this.height();
         MyDiv_w = parseInt(MyDiv_w);
         MyDiv_h = parseInt(MyDiv_h);
        var width = $.PageSize().Width;
        var height = $.PageSize().Height;
        var left = $.ScrollPosition().Left;
        var top = $.ScrollPosition().Top;
        var Div_topposition = top + (height / 2) - (MyDiv_h / 2);
        var Div_leftposition = left + (width / 2) - (MyDiv_w / 2);
        this.css("position", "absolute");
        this.css("z-index", "10001");
        this.css("background", "#fff");
        this.css("left", Div_leftposition + "px");
        this.css("top", Div_topposition + "px");
        if ($.browser.mozilla)
         {
            this.show();
            return;
         }
        this.fadeIn("fast");

     }
     , CloseDiv: function()
     {

        if ($.browser.mozilla)
         {
            this.hide();

         } else
         {
            this.fadeOut("fast");

         } $("html").css("overflow", $("#BigDiv").attr("htmloverflow"));
         window.scrollTo($("#BigDiv").attr("divbox_scrollleft"), $("#BigDiv").attr("divbox_scrolltop"));
         $("#BigDiv").data("divbox_selectlist").show();
         $("#BigDiv").remove();

     }

});
$.extend(
{
     PageSize:function ()
     {
        var width=0;
        var height=0;
         width=window.innerWidth!=null?window.innerWidth:document.documentElement&&document.documentElement.clientWidth?document.documentElement.clientWidth:document.body!=null?document.body.clientWidth:null;
         height=window.innerHeight!=null?window.innerHeight:document.documentElement&&document.documentElement.clientHeight?document.documentElement.clientHeight:document.body!=null?document.body.clientHeight:null;
        return {Width:width,Height:height};
     }
     ,ScrollPosition:function ()
     {
        var top=0,left=0;
        if($.browser.mozilla)
         {
             top=window.pageYOffset;
             left=window.pageXOffset;

         }
        else if($.browser.msie)
         {
             top=document.documentElement.scrollTop;
             left=document.documentElement.scrollLeft;

         }
        else if(document.body)
         {
             top=document.body.scrollTop;
             left=document.body.scrollLeft;
         }
        return {Top:top,Left:left};

     }
});