基于jQuery的弹出层功能

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

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

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

View Code

1 /* 弹层控制样式 */
2 #TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333; }
3 #TB_window a:link { color: #666; }
4 #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;}
5 * html #TB_overlay { /* ie6 hack */position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
6 #TB_window { position:fixed; z-index:10002; color:#000; display:none; text-align:left; top:50%; left:50%;}
7 * 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');}
8 #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; }
9 * html #TB_HideSelect { /* ie6 hack */position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}

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

下面贴一下js代码：

View Code

 1 /*
 2  * msgBox 弹出层 [支持ID和框架形式]
 3  * author     yangjinjin
 4  * id         元素ID(为空可嵌入外链页面)
 5  * w          要显示的弹出层宽度
 6  * h         要显示的弹出层高度
 7  * url        外部链接地址
 8 */
 9 
10 var msgBox = {
11     temp:'',    
12     show: function(options){
13         this.pageid  = options["id"] || null;
14         this.width   = options["w"] || 630;
15         this.height  = options["h"] || 440;
16         this.pageurl = options["url"] || "";
17         
18         try {
19             if(typeof document.body.style.maxHeight === "undefined"){
20                 $("body","html").css({height:"100%", "100%"});
21                 $("html").css("overflow", "hidden");
22                 if(document.getElementById("TB_HideSelect") === null){
23                     $("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
24                 }
25             }else{
26                 if(document.getElementById("TB_overlay") === null){
27                     $("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
28                 }
29             }
30             
31             $(window).scroll(this.position); //实现随滚动条滚动
32             
33             if(this.pageurl != ""){
34                 $("#TB_window").append("<iframe frameborder='0' hspace='0' src='"+ this.pageurl +"' id='TB_iframeContent' name='TB_iframeContent"+ Math.round(Math.random()*1000) +"' style='"+ this.width +"px;height:"+ this.height +"px;'></iframe>");
35             }else{
36                 $("#TB_window").append('<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td>' + $("#" + this.pageid).html() + '</td></tr></table>');    
37                 this.temp = '<div id="'+this.pageid +'" style="display:none;">'+ $("#" + this.pageid).html()+'</div>';
38                 $("#" + this.pageid).remove();                
39             }            
40             
41             this.position(); //设置弹出层所在位置
42             $("#TB_window").css({display: "block"});
43             var t = this;
44             $(".TB_closeBtn,#TB_closeBtn").click(function(){
45                 t.remove();
46             });
47         } catch(e) {
48             throw e;
49         }
50     },
51     remove: function() {
52         $(".TB_closeBtn,#TB_closeBtn").unbind("click");
53         if(this.temp){
54             $("body").append(this.temp);
55             this.temp='';
56         }
57         $("#TB_window,#TB_overlay,#TB_HideSelect").remove();
58         $("body","html").css({height: "auto",  "auto"});
59         $("html").css("overflow", "");
60         
61         document.onkeydown = "";
62         document.onkeyup = "";
63         return false;
64     },
65     position: function(){        
66         $("#TB_window").css({marginLeft: "-" + parseInt((this.width / 2),10) + "px",  this.width + "px"});
67         if(!(jQuery.browser.msie && jQuery.browser.version < 7)){ // take away IE6
68             $("#TB_window").css({marginTop: "-" + parseInt((this.height / 2),10) + "px"});
69         }
70     }
71 };

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

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

<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>

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

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