JS 遮罩层弹出插件

Dialog.js

//===============================================
//  简易框架
//===============================================

function $(elementType) {
    return typeof elementType == 'string' ? document.getElementById(elementType) : null;
}

//获得框架扩展对象
var Dialog = function(element) {
    //如果是字符串，就取以该字符串为ID的扩展对象；
    //如果是对象，直接返回扩展对象

    return fn.extend(typeof element == 'string' ? document.getElementById(element) : element, fn);
};

//判断是否是IE
Dialog.isIE = ! -[1, ];
//判断是否是IE6
Dialog.isIE6 = Dialog.isIE && !window.XMLHttpRequest;
//判断是否是Quirks渲染模式
Dialog.isQuirksMode = !(typeof document.compatMode != "undefined" && /CSS.Compat/.test(document.compatMode));
//判断是否使用绝对定位
Dialog.isAbsolute = Dialog.isIE6 || Dialog.isQuirksMode ? 'absolute' : 'fixed';

//显示页面类型
Dialog.dialogType = {
    Default: "HTMLPage.htm",
    AcceptAddress: "../DialogBox/address.aspx",
    Area: "../DialogBox/Area.aspx",
    AssocEnterprises: "../DialogBox/company.aspx",
    CompanyTax: "../DialogBox/CompanyTax.aspx",
    SaleArea: "../DialogBox/SaleArea.aspx"
};

//创建扩展对象
Dialog.create = function(elementType) {
    return Dialog(typeof elementType == 'string' ? document.createElement(elementType) : elementType);
}

//遮罩背景层
Dialog.BgDiv = {
    //背景层显示
    show: function() {
        //判断是否创建
        if (this._div == undefined) {

            //创建DIV遮罩层
            this._div = Dialog.create("div");

            var _height = document.body.clientHeight < 700 ? window.screen.availHeight : document.body.clientHeight;

            var _width = Dialog.isIE6 ? document.documentElement.clientWidth + 'px' : '100%';

            this._div.css({ position: Dialog.isAbsolute, top: '0px', left: '0px', width: _width, height: _height + 'px', zIndex: '1' });

            this._div.appendTo(document.body).trans();

        }
        else {
            this._div.css({ display: 'block' });
        }
        return this._div;
    },
    //背景层关闭
    close: function() {
        this._div.css({ display: 'none' });
    }
}

//iframe弹出框
Dialog.Iframe = {

    /*
    显示弹出框
    curDiv:附加到该容器
    dialogType: 弹出框的显示类型，确认收货、关联企业、销售区域……等
    */
    show: function(dialogType, p_width, p_height) {
        if (this._iframe == undefined) {
            //创建iFrame
            var _curIframe = Dialog.create("iframe");

            _curIframe.src = dialogType;

            if (_curIframe.attachEvent) {//IE

                _curIframe.frameBorder = 0;

                _curIframe.attachEvent("onload", function() { _curIframe.autoHeight(); });

            } else {//非IE

                _curIframe.onload = function() { _curIframe.autoHeight(); }
            }
            _curIframe.appendTo(document.body).css({ width: p_width, height: p_height, position: Dialog.isAbsolute, zIndex: '2', border: 'solid 1px #c7c7c7', background: '#fff' }).center().css({ top: '50px' }).id = "iframe1";

            this._iframe = _curIframe;

        }
        else {
            this._iframe.src = dialogType;
            this._iframe.css({ display: 'block' });
        }

        return this._iframe;
    },
    //设置iframe的高度自动适应内容高度
    autoHeight: function() {
        if (this._iframe != undefined)
            this._iframe.autoHeight();
    },
    //iframe关闭
    close: function() {
        this._iframe.css({ display: 'none' });
    }
}

//dialogType 弹出框的显示类型，确认收货、关联企业、销售区域……等
Dialog.show = function(dialogType, fn, width, height) {

    this.closeFn = fn;
    var _width = "400px";
    var _height = "300px";

    if (width != undefined)
        _width = width + "px";
    if (height != undefined)
        _height = height + "px";

    //显示背景层
    Dialog.BgDiv.show();

    //显示弹出框
    return Dialog.Iframe.show(dialogType, _width, _height);

}

//关闭
Dialog.close = function() {

    //关闭iframe
    Dialog.Iframe.close();

    //关闭背景层
    Dialog.BgDiv.close();

    if(this.closeFn!=undefined)
        this.closeFn();
}

var fn = Dialog.prototype =
    {
        //实现简单继承功能
        extend: function(dest, source) {
            for (var i in source) dest[i] = source[i];
            return dest;
        },

        //为对象增加css样式
        css: function(style) {
            this.extend(this.style, style);
            return this;
        },

        //使对象居中显示
        //offset{left:xxx,top:xxx}的JSON表达式，表示在居中基础上的编移量
        center: function(offset) {
            this.css({
                left: (this.parentNode.clientWidth - this.clientWidth) / 2 + (offset ? offset.left : 0) + 'px',
                top: (this.parentNode.clientHeight - this.clientHeight) / 2 + (offset ? offset.top : 0) + 'px'
            });
            return this;
        },

        //如果是iframe,设置iframe的高度自动适应内容高度
        autoHeight: function() {
            var _height = Dialog.isIE ? this.contentWindow.document.body.scrollHeight : this.contentWindow.document.body.clientHeight;
            this.css({ height: _height + 40 > 800 ? 800 : _height + 40 + 'px' });
        },

        //获得或设置对象内的内容
        html: function(html) {
            if (html) {
                this.innerHTML = html;
                return this;
            }
            return this.innerHTML;
        },

        //将对象增加到父元素内
        //parentElement为父元素
        appendTo: function(parentElement) {
            parentElement.appendChild(this);
            return this;
        },

        //透明度
        trans: function() {
            if (Dialog.isIE) {
                this.css({
                    background: 'rgb(0, 0, 0)',
                    filter: 'Alpha(opacity=50)', //'progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)'
                    opacity: 0.5
                });
            }
            else {
                this.css({
                    backgroundColor: 'rgba(0,0,0,0.5)'
                });
            }
        }
    }


    //************************************
    //返回结果实体对象
    //************************************
    Dialog.Model = {

        //收货地址
        AcceptAddress: {
            Id: 0,
            ClientName: "", //收货人姓名
            FullAreaName: "", //完整地区名称
            Address: "", //收货地址
            Mobile: "", //手机
            Code: ""//邮编
        },

        //选择地区
        Area: {
            ProvinceId: 0, //省
            CityId: 0, //市
            XianId: 0, //县
            XiangId: 0, //乡镇
            FullAreaName: ""//完整地区名称
        },

        //开票单位
        CompanyTax: {
            Id: 0,
            CompanyName: "", //开票单位名称
            CompanyInfo: ""//开票信息
        },

        //销售区域
        SaleArea: {
            Id: 0,
            FullAreaName: "", //销售地区
            Address: "" //具体市场
        }
}

内容页面：(例：area.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Area.aspx.cs" Inherits="DialogBox_Area" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/Dialog.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function userClick(nodeLevel,url,fullAreaName) {
            if (nodeLevel == 4) {
                url = url.split('?')[1];
                var arr = url.split('&');
                var m = parent.window.Dialog.Model.Area;
                
                m.ProvinceId = arr[3].split('=')[1];
                m.CityId = arr[2].split('=')[1];
                m.XianId = arr[1].split('=')[1];
                m.XiangId = arr[0].split('=')[1];

                m.FullAreaName = fullAreaName;

                parent.window.Dialog.close();
            } else {
                window.location.href = url;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="close" onclick="javascript:parent.window.Dialog.close()">
    </div>
    <div class="divMain">
        <div class="divRow1">
            <ul>
                <li>
                    <img src="img/ico.gif" />
                </li>
                <li><strong>选择地区</strong></li></ul>
        </div>
        <div class="clear">
            <asp:Literal ID="litNav" runat="server"></asp:Literal>
        </div>
        <div class="divRow2">
            <asp:Repeater ID="RepeaterArea" runat="server">
                <ItemTemplate>
                    <a href='#' onclick="userClick(<%# Eval("nodeLevel") %>,'<%# urlParm(Eval("Id").ToString()) %>','<%# Eval("FullAreaName") %>')"><span><%# Eval("AreaName") %></span></a>
                    
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
    </form>
</body>
</html>

调用页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="DialogBox_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="Js/Dialog.js" type="text/javascript"></script>
    <script type="text/javascript">

    var ifr;
        function show3() {
            ifr = Dialog.show(Dialog.dialogType.Area, function() {
                var m = Dialog.Model.Area;
                $("Text1").value = m.ProvinceId;
                $("Text2").value = m.CityId;
                $("Text3").value = m.XianId;
                $("Text4").value = m.XiangId;
                $("Text5").value = m.FullAreaName;
            });

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">

    <input type="button" id="btn2" onclick="show3()" value="选择地区" />
    省 <input id="Text1" type="text" />
    市 <input id="Text2" type="text" />
    县 <input id="Text3" type="text" />
    乡 <input id="Text4" type="text" />
    
    全称 <input id="Text5" type="text" />
    
    </form>
</body>
</html>