基于jQuery的弹出层功能

这个是基于jQuery的弹出层功能，是我一年半以前写的，代码不长。支持页面ID方式（页面#id内容显示）和iframe框架模式（可嵌入一个网络地址）。

现我把全部代码贴出来，供大家参考。有任何问题，请及时评论或留言，我会和大家共进步。

首先，把用到的css样式添加进来。代码如下：

/* 弹层控制样式 */
#TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333; }
#TB_window a:link { color: #666; }
#TB_overlay { position: fixed; z-index:10000; width:100%; height:100%; top:0; left:0; background-color:#666; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;}
* html #TB_overlay { /* ie6 hack */position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
#TB_window { position:fixed; z-index:10002; color:#000; display:none; text-align:left; top:50%; left:50%;}
* html #TB_window { /* ie6 hack */position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
#TB_HideSelect { position:fixed; z-index:99; top:0; left:0; width:100%; height:100%; background-color:#FFF; border:none; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
* html #TB_HideSelect { /* ie6 hack */position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}

您可把这些css样式放到页面中或是单独放到文件中都行。

下面贴一下js代码：

/*
 * msgBox 弹出层 [支持ID和框架形式]
 * author     yangjinjin
 * id         元素ID(为空可嵌入外链页面)
 * w          要显示的弹出层宽度
 * h         要显示的弹出层高度
 * url        外部链接地址
*/

var msgBox = {
    temp:'',    
    show: function(options){
        this.pageid  = options["id"] || null;
        this.width   = options["w"] || 630;
        this.height  = options["h"] || 440;
        this.pageurl = options["url"] || "";
        
        try {
            if(typeof document.body.style.maxHeight === "undefined"){
                $("body","html").css({height:"100%", width:"100%"});
                $("html").css("overflow", "hidden");
                if(document.getElementById("TB_HideSelect") === null){
                    $("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
                }
            }else{
                if(document.getElementById("TB_overlay") === null){
                    $("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
                }
            }
            
            $(window).scroll(this.position); //实现随滚动条滚动
            
            if(this.pageurl != ""){
                $("#TB_window").append("<iframe frameborder='0' hspace='0' src='"+ this.pageurl +"' id='TB_iframeContent' name='TB_iframeContent"+ Math.round(Math.random()*1000) +"' style='width:"+ this.width +"px;height:"+ this.height +"px;'></iframe>");
            }else{
                $("#TB_window").append('<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td>' + $("#" + this.pageid).html() + '</td></tr></table>');    
                this.temp = '<div id="'+this.pageid +'" style="display:none;">'+ $("#" + this.pageid).html()+'</div>';
                $("#" + this.pageid).remove();                
            }            
            
            this.position(); //设置弹出层所在位置
            $("#TB_window").css({display: "block"});
            var t = this;
            $(".TB_closeBtn,#TB_closeBtn").click(function(){
                t.remove();
            });
        } catch(e) {
            throw e;
        }
    },
    remove: function() {
        $(".TB_closeBtn,#TB_closeBtn").unbind("click");
        if(this.temp){
            $("body").append(this.temp);
            this.temp='';
        }
        $("#TB_window,#TB_overlay,#TB_HideSelect").remove();
        $("body","html").css({height: "auto", width: "auto"});
        $("html").css("overflow", "");
        
        document.onkeydown = "";
        document.onkeyup = "";
        return false;
    },
    position: function(){        
        $("#TB_window").css({marginLeft: "-" + parseInt((this.width / 2),10) + "px", width: this.width + "px"});
        if(!(jQuery.browser.msie && jQuery.browser.version < 7)){ // take away IE6
            $("#TB_window").css({marginTop: "-" + parseInt((this.height / 2),10) + "px"});
        }
    }
};

同样的，上述代码最好单独放到一个文件中。

那么在页面中可以这样使用：

<script type="text/javascript">
//这是加载页面中ID的HTML内容方式
msgBox.show({"id": "onePageContent", "w": 518, "h": 284});

//如果希望载入一个外链或URL
msgBox.show({"url": "http://www.baidu.com", "w": 518, "h": 284});
</script>

如果看得不是太清楚，可以参考如下链接的使用方法：

点击该链接下的领取新手卡