基于jquery实现的弹出层效果实现！

css代码：

[css]  view plain copy

1. *{padding:0; margin:0}  
2. /*弹出层插件样式开始*/  
3. .floatBoxBg{display:none;width:100%;height:100%;background:#000;position:fixed !important;/*ie7 ff*/position:absolute;top:0;left:0;filter:alpha(opacity=0);opacity:0; z-index:999;}  
4. .floatBox{border:#1b315e 5px solid;position:fixed !important;/*ie7 ff*/position:absolute;top:0;left:0;background:#fff; display:none; z-index:1000;}  
5. .floatBox .title{height:23px;padding:7px 10px 0;color:#fff;background-attachment: scroll;background:#1b315e;background-repeat: repeat-x;background-position: 0px 0px; cursor:move;}  
6. .floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px; font-weight:bold; display:inline;}  
7. .floatBox .title span{float:right;cursor:pointer;}display:inline;  
8. .floatBox .title span img{cursor:pointer; margin:-5px -5px;}  
9. .floatBox .content{padding:0;background:#fff;overflow-x:hidden;overflow-y: auto;}  
10. .closeDialog{ font-size:20px; font-weight:bold; color:#000; margin-top:-5px;}  
11. .closeDialog:hover{ font-size:20px; font-weight:bold; color:#fff; margin-top:-5px; position: relative fixed absolute}  
12. /*弹出层插件样式结束*/  

js代码：

[javascript]  view plain copy

1. var t;//当前激活层的对象      
2. var _move=false;//移动标记  
3. var _x,_y;//鼠标离控件左上角的相对位置  
4. var newz=1;//新对象的z-index  
5. var oldz=1;//旧对象的z-index  
6. $(function() {  
7.     $.fn.manhuaDialog = function(options) {  
8.         var defaults = {  
9.             Event : "click",                                //触发响应事件  
10.             title : "title",                                //弹出层的标题  
11.             type : "Iframe",                                    //弹出层类型(text、容器ID、URL、Iframe)  
12.             content : "content",                            //弹出层的内容(text文本、容器ID名称、URL地址、Iframe的地址)  
13.             width : 500,                                    //弹出层的宽度  
14.             height : 400,                                   //弹出层的高度  
15.             closeID : "closeId",                            //关闭对话框的ID  
16.             isAuto : false,                                 //是否自动弹出  
17.             time : 2000,                                    //设置自动弹出层时间，前提是isAuto=true  
18.             isClose : false,                                //是否自动关闭          
19.             timeOut : 2000                                  //设置自动关闭时间，前提是isClose=true  
20.               
21.         };  
22.         var options = $.extend(defaults,options);         
23.         $("body").prepend("<div class='floatBoxBg' id='fb"+options.title+"'></div><div class='floatBox' id='"+options.title+"'><div class='title' id='t"+options.title+"'><h4></h4><span class='closeDialog' id='c"+options.title+"'>X</span></div><div class='content'></div></div>");   
24.         var $this = $(this);                                //当然响应事件对象  
25.         var $blank = $("#fb"+options.title);                        //遮罩层对象  
26.         var $title = $("#"+options.title+" .title h4");             //弹出层标题对象  
27.         var $content = $("#"+options.title+" .content");                //弹出层内容对象  
28.         var $dialog = $("#"+options.title+"");                      //弹出层对象  
29.         var $close = $("#c"+options.title);                     //关闭层按钮对象  
30.         var $ttt =  $("#t"+options.title);    
31.         var $closeId = $("#"+options.closeID);  
32.         var stc,st;  
33.         if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {//判断IE6  
34.             $blank.css({height:$(document).height(),width:$(document).width()});  
35.         }  
36.         $close.live("click",function(){  
37.             if ($("#hangyedialog")){  
38.                 $("#hangyedialog").hide();  
39.             }  
40.             $blank.hide();  
41.             $dialog.hide();           
42.             if(st){  
43.                 clearTimeout(st);//清除定时器  
44.             }  
45.             if(stc){  
46.                 clearTimeout(stc);//清除定时器  
47.             }  
48.         });   
49.         $closeId.live("click",function(){  
50.             if ($("#hangyedialog")){  
51.                 $("#hangyedialog").hide();  
52.             }  
53.             $blank.hide();  
54.             $dialog.hide();           
55.             if(st){  
56.                 clearTimeout(st);//清除定时器  
57.             }  
58.             if(stc){  
59.                 clearTimeout(stc);//清除定时器  
60.             }  
61.         });   
62.         $ttt.live("mousedown",function(e){                                      
63.              _move=true;  
64.             newz = parseInt($dialog.css("z-index"))  
65.             $dialog.css({"z-index":newz+oldz});  
66.             //t =  $dialog;//初始化当前激活层的对象  
67.             _x=e.pageX-parseInt($dialog.css("left"));//获得左边位置  
68.             _y=e.pageY-parseInt($dialog.css("top"));//获得上边位置  
69.             $dialog.fadeTo(50, 0.5);//点击后开始拖动并透明显示                                 
70.         });  
71.         $(document).live("mousemove",function(e){  
72.              if(_move){  
73.                 var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置  
74.                 var y=e.pageY-_y;  
75.                  $dialog.css({top:y,left:x});//控件新位置              
76.             }                              
77.         });  
78.         $ttt.live("mouseup",function(e){  
79.             _move=false;  
80.              $dialog.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明  
81.             oldz = parseInt($dialog.css("z-index"));//获得最后激活层的z-index                              
82.         });  
83.           
84.         $content.css("height",parseInt(options.height)-30);  
85.         //文本框绑定事件  
86.         $this.live(options.Event,function(e){                 
87.             $title.html(options.title);  
88.             switch(options.type){  
89.                 case "url":                                 //当类型是地址的时候                   
90.                     $content.ajaxStart(function(){  
91.                         $(this).html("loading...");  
92.                     });  
93.                     $.get(options.content,function(html){  
94.                         $content.html(html);                          
95.                     });  
96.                     break;  
97.                 case "text":                                //当类型是文本的时候  
98.                     $content.html(options.content);  
99.                     break;  
100.                 case "id":                                  //当类型是容器ID的时候  
101.                     $content.html($("#"+options.content+"").html());  
102.                     break;  
103.                 case "iframe":                              //当类型是Iframe的时候  
104.                     $content.html("<iframe src=\""+options.content+"\" width=\"100%\" height=\""+(parseInt(options.height)-40)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");  
105.                     break;  
106.                 default:                                    //默认情况下的时候  
107.                     $content.html(options.content);  
108.                     break;  
109.             }  
110.               
111.             $blank.show();  
112.             $blank.animate({opacity:"0.5"},"normal");         
113.             $dialog.css({display:"block",left:(($(document).width())/2-(parseInt(options.width)/2)-5)+"px",top:((document.documentElement.clientHeight)/2-(parseInt(options.height)/2))+"px",width:options.width,height:options.height});  
114.             //$dialog.animate({top:($(document).scrollTop()+options.scrollTop)+"px"},"normal");  
115.             //$dialog.animate({top:options.scrollTop+"px"},"normal");  
116.             if (options.isClose){  
117.                 stc = setTimeout(function (){             
118.                     $close.trigger("click");  
119.                     clearTimeout(stc);  
120.                 },options.timeOut);   
121.             }  
122.               
123.         });   
124.         if (options.isAuto){  
125.             st = setTimeout(function (){              
126.                 $this.trigger(options.Event);  
127.                 clearTimeout(st);  
128.             },options.time);      
129.         }  
130.     }  
131. });  

页面中使用方法：

head部分引入css文件和js文件（引入js文件前先引入jquery支持）

[javascript]  view plain copy

1. <link rel="stylesheet" type="text/css" href="css/manhuaDialog.1.0.css">  
2. <script type="text/javascript" src="js/jquery.js"></script>  
3. <script type="text/javascript" src="js/manhuaDialog.1.0.js"></script>  

编写js文件：

[javascript]  view plain copy

1. <script type="text/javascript">  
2. $(function (){  
3.     $("#test").manhuaDialog({                            
4.         Event : "click",                                //触发响应事件  
5.         title : "优秀员工信息",                   //弹出层的标题  
6.         type : "url",                                   //弹出层类型(text、容器ID、URL、Iframe)  
7.         content : "http://192.168.8.44:8080/excellent_stuff/toList.action",                             //弹出层的内容获取(text文本、容器ID名称、URL地址、Iframe的地址)  
8.           
9.         width : 500,                                    //弹出层的宽度  
10.         height : 300,                                   //弹出层的高度      
11.         scrollTop : 200,                                //层滑动的高度也就是弹出层时离顶部滑动的距离  
12.         isAuto : false,                                 //是否自动弹出  
13.         //time : 2000,                                  //设置弹出层时间，前提是isAuto=true  
14.         isClose : false,                                //是否自动关闭          
15.     //  timeOut : 5000                                  //设置自动关闭时间，前提是isClose=true    
16.     });  
17. });  
18. </script>   

html的body部分的编写：

[html]  view plain copy

1. <a href="javascript:void(0)" id="test">更多></a>