基於jquery實現的彈出層效果實現！

css代碼：

*{padding:0; margin:0}/*彈出層外掛程式樣式開始*/.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;}.floatBox{border:#1b315e 5px solid;position:fixed !important;/*ie7 ff*/position:absolute;top:0;left:0;background:#fff; display:none; z-index:1000;}.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;}.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px; font-weight:bold; display:inline;}.floatBox .title span{float:right;cursor:pointer;}display:inline;.floatBox .title span img{cursor:pointer; margin:-5px -5px;}.floatBox .content{padding:0;background:#fff;overflow-x:hidden;overflow-y: auto;}.closeDialog{ font-size:20px; font-weight:bold; color:#000; margin-top:-5px;}.closeDialog:hover{ font-size:20px; font-weight:bold; color:#fff; margin-top:-5px; position: relative fixed absolute}/*彈出層外掛程式樣式結束*/

js代碼：

var t;//當前啟用層的對象var _move=false;//移動標記var _x,_y;//滑鼠離控制項左上方的相對位置var newz=1;//新對象的z-indexvar oldz=1;//舊對象的z-index$(function() {$.fn.manhuaDialog = function(options) {var defaults = {Event : "click",//觸發響應事件title : "title",//彈出層的標題type : "Iframe",//彈出層類型(text、容器ID、URL、Iframe)content : "content",//彈出層的內容(text文本、容器ID名稱、URL地址、Iframe的地址)width : 500,//彈出層的寬度height : 400,//彈出層的高度closeID : "closeId",//關閉對話方塊的IDisAuto : false,//是否自動彈出time : 2000,//設定自動彈出層時間，前提是isAuto=trueisClose : false,  //是否自動關閉timeOut : 2000//設定自動關閉時間，前提是isClose=true};var options = $.extend(defaults,options);$("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>");var $this = $(this);//當然響應事件對象var $blank = $("#fb"+options.title);//遮罩層對象var $title = $("#"+options.title+" .title h4");//彈出層標題對象var $content = $("#"+options.title+" .content");//彈出層內容對象var $dialog = $("#"+options.title+"");//彈出層對象var $close = $("#c"+options.title);//關閉層按鈕對象var $ttt =  $("#t"+options.title);var $closeId = $("#"+options.closeID);var stc,st;if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {//判斷IE6$blank.css({height:$(document).height(),width:$(document).width()});}$close.live("click",function(){if ($("#hangyedialog")){$("#hangyedialog").hide();}$blank.hide();$dialog.hide();if(st){clearTimeout(st);//清除定時器}if(stc){clearTimeout(stc);//清除定時器}});$closeId.live("click",function(){if ($("#hangyedialog")){$("#hangyedialog").hide();}$blank.hide();$dialog.hide();if(st){clearTimeout(st);//清除定時器}if(stc){clearTimeout(stc);//清除定時器}});$ttt.live("mousedown",function(e){   _move=true;newz = parseInt($dialog.css("z-index"))$dialog.css({"z-index":newz+oldz});//t =  $dialog;//初始化當前啟用層的對象_x=e.pageX-parseInt($dialog.css("left"));//獲得左邊位置_y=e.pageY-parseInt($dialog.css("top"));//獲得上邊位置$dialog.fadeTo(50, 0.5);//點擊後開始拖動並透明顯示 });$(document).live("mousemove",function(e){ if(_move){var x=e.pageX-_x;//移動時根據滑鼠位置計算控制項左上方的絕對位置var y=e.pageY-_y; $dialog.css({top:y,left:x});//控制項新位置} });$ttt.live("mouseup",function(e){_move=false; $dialog.fadeTo("fast", 1);//鬆開滑鼠後停止移動並恢複成不透明oldz = parseInt($dialog.css("z-index"));//獲得最後啟用層的z-index });$content.css("height",parseInt(options.height)-30);//文字框綁定事件$this.live(options.Event,function(e){$title.html(options.title);switch(options.type){case "url"://當類型是地址的時候$content.ajaxStart(function(){$(this).html("loading...");});$.get(options.content,function(html){$content.html(html);});break;case "text"://當類型是文本的時候$content.html(options.content);break;case "id"://當類型是容器ID的時候$content.html($("#"+options.content+"").html());break;case "iframe"://當類型是Iframe的時候$content.html("<iframe src=\""+options.content+"\" width=\"100%\" height=\""+(parseInt(options.height)-40)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");break;default://預設情況下的時候$content.html(options.content);break;}$blank.show();$blank.animate({opacity:"0.5"},"normal");$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});//$dialog.animate({top:($(document).scrollTop()+options.scrollTop)+"px"},"normal");//$dialog.animate({top:options.scrollTop+"px"},"normal");if (options.isClose){stc = setTimeout(function (){$close.trigger("click");clearTimeout(stc);},options.timeOut);}});if (options.isAuto){st = setTimeout(function (){$this.trigger(options.Event);clearTimeout(st);},options.time);}}});

頁面中使用方法：

head部分引入css檔案和js檔案（引入js檔案前先引入jquery支援）

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

編寫js檔案：

<script type="text/javascript">$(function (){$("#test").manhuaDialog({       Event : "click",//觸發響應事件title : "優秀員工資訊",//彈出層的標題type : "url",//彈出層類型(text、容器ID、URL、Iframe)content : "http://192.168.8.44:8080/excellent_stuff/toList.action",//彈出層的內容擷取(text文本、容器ID名稱、URL地址、Iframe的地址)width : 500,//彈出層的寬度height : 300,//彈出層的高度scrollTop : 200,//層滑動的高度也就是彈出層時離頂部滑動的距離isAuto : false,//是否自動彈出//time : 2000,//設定彈出層時間，前提是isAuto=trueisClose : false,  //是否自動關閉//timeOut : 5000//設定自動關閉時間，前提是isClose=true});});</script> 

html的body部分的編寫：

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