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