jquery 弹出层 插件

源地址引用：http://www.caixw.com/public/uploads/demo/jquery/dialog/

 

有一些适量的修改。

 

其中已经：

 

var HG=jQuery.noConflict();

 

/** * Dialog * * @author caixw <http://www.caixw.com> * @copyright Copyright (C) 2010, http://www.caixw.com * @license FreeBSD license */ /** * jQuery的Dialog插件。 * * @param object content * @param object options 选项。 * @return */ function Dialog(content, options) { var defaults = { // 默认值。 title:'标题', // 标题文本，若不想显示title请通过CSS设置其display为none showTitle:true, // 是否显示标题栏。 closeText:'[关闭]', // 关闭按钮文字，若不想显示关闭按钮请通过CSS设置其display为none draggable:true, // 是否移动 modal:true, // 是否是模态对话框 center:true, // 是否居中。 fixed:true, // 是否跟随页面滚动。 time:0, // 自动关闭时间，为0表示不会自动关闭。 id:false // 对话框的id，若为false，则由系统自动产生一个唯一id。 }; var options = HG.extend(defaults, options); options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID var overlayId = options.id + '-overlay'; // 遮罩层ID var timeId = null; // 自动关闭计时器 var isShow = false; var isIe = HG.browser.msie; var isIe6 = HG.browser.msie && ('6.0' == HG.browser.version); /* 对话框的布局及标题内容。*/ var barHtml = !options.showTitle ? '' : '<div class="bar"><span class="title">' + options.title + '</span><a class="close">' + options.closeText + '</a></div>'; var dialog = HG('<div id="' + options.id + '" class="dialog">'+barHtml+'<div class="content"></div></div>').hide(); HG('body').append(dialog); /*修改开始，新增样式的外部引入*/ if(undefined != options.dialogCssName){ HG(".dialog").addClass(options.dialogCssName); } if(undefined != options.contentCssName){ HG(".content").addClass(options.contentCssName); } /*修改结束*/ /** * 重置对话框的位置。 * * 主要是在需要居中的时候，每次加载完内容，都要重新定位 * * @return void */ var resetPos = function() { /* 是否需要居中定位，必需在已经知道了dialog元素大小的情况下，才能正确居中，也就是要先设置dialog的内容。 */ if(options.center) { var left = (HG(window).width() - dialog.width()) / 2; var top = (HG(window).height() - dialog.height()) / 2; if(!isIe6 && options.fixed) { dialog.css({top:top,left:left}); } else { dialog.css({top:top+HG(document).scrollTop(),left:left+HG(document).scrollLeft()}); } } } /** * 初始化位置及一些事件函数。 * * 其中的this表示Dialog对象而不是init函数。 */ var init = function() { /* 是否需要初始化背景遮罩层 */ if(options.modal) { HG('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>'); HG('#' + overlayId).css({'left':0, 'top':0, /*'width':HG(document).width(),*/ 'width':'100%', /*'height':'100%',*/ 'height':HG(document).height(), 'z-index':++Dialog.__zindex, 'position':'absolute'}) .hide(); } dialog.css({'z-index':++Dialog.__zindex, 'position':options.fixed ? 'fixed' : 'absolute'}); /* IE6 兼容fixed代码 */ if(isIe6 && options.fixed) { dialog.css('position','absolute'); resetPos(); var top = parseInt(dialog.css('top')) - HG(document).scrollTop(); var left = parseInt(dialog.css('left')) - HG(document).scrollLeft(); HG(window).scroll(function(){ dialog.css({'top':HG(document).scrollTop() + top,'left':HG(document).scrollLeft() + left}); }); } /* 以下代码处理框体是否可以移动 */ var mouse={x:0,y:0}; function moveDialog(event) { var e = window.event || event; var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y); var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x); dialog.css({top:top,left:left}); mouse.x = e.clientX; mouse.y = e.clientY; }; dialog.find('.bar').mousedown(function(event){ if(!options.draggable){ return; } var e = window.event || event; mouse.x = e.clientX; mouse.y = e.clientY; HG(document).bind('mousemove',moveDialog); }); HG(document).mouseup(function(event){ HG(document).unbind('mousemove', moveDialog); }); /* 绑定一些相关事件。 */ dialog.find('.close').bind('click', this.close); dialog.bind('mousedown', function(){ dialog.css('z-index', ++Dialog.__zindex); }); // 自动关闭 if(0 != options.time){ timeId = setTimeout(this.close, options.time); } } /** * 设置对话框的内容。 * * @param string c 可以是HTML文本。 * @return void */ this.setContent = function(c) { var div = dialog.find('.content'); if('object' == typeof(c)) { switch(c.type.toLowerCase()) { case 'id': // 将ID的内容复制过来，原来的还在。 div.html(HG('#' + c.value).html()); break; case 'img': div.html('加载中...'); HG('<img alt="" />').load(function(){div.empty().append(HG(this));resetPos();}) .attr('src',c.value); break; case 'url': div.html('加载中...'); HG.ajax({url:c.value, success:function(html){div.html(html);resetPos();}, error:function(xml,textStatus,error){div.html('出错啦')} }); break; case 'iframe': div.append(HG('<iframe src="' + c.value + '" mce_src="' + c.value + '" frameborder="0" marginHeight="0" marginWidth="0" scrolling="No" />')); break; case 'text': default: div.html(c.value); break; } } else { div.html(c); } } /** * 显示对话框 */ this.show = function() { if(undefined != options.beforeShow && !options.beforeShow()) { return; } /** * 获得某一元素的透明度。IE从滤境中获得。 * * @return float */ var getOpacity = function(id) { if(!isIe) { return HG('#' + id).css('opacity'); } var el = document.getElementById(id); return (undefined != el && undefined != el.filters && undefined != el.filters.alpha && undefined != el.filters.alpha.opacity) ? el.filters.alpha.opacity / 100 : 1; } /* 是否显示背景遮罩层 */ if(options.modal) { HG('#' + overlayId).fadeTo('slow', getOpacity(overlayId)); } dialog.fadeTo('slow', getOpacity(options.id), function(){ if(undefined != options.afterShow){ options.afterShow(); } isShow = true; }); // 自动关闭 if(0 != options.time){ timeId = setTimeout(this.close, options.time); } resetPos(); } /** * 隐藏对话框。但并不取消窗口内容。 */ this.hide = function() { if(!isShow){ return; } if(undefined != options.beforeHide && !options.beforeHide()) { return; } dialog.fadeOut('slow',function(){ if(undefined != options.afterHide){ options.afterHide(); } }); if(options.modal) { HG('#' + overlayId).fadeOut('slow'); } isShow = false; } /** * 关闭对话框 * * @return void */ this.close = function() { if(undefined != options.beforeClose && !options.beforeClose()) { return; } dialog.fadeOut('slow', function(){ HG(this).remove(); isShow = false; if(undefined != options.afterClose){ options.afterClose(); } }); if(options.modal) { HG('#'+overlayId).fadeOut('slow', function(){HG(this).remove();}); } clearTimeout(timeId); } init.call(this); this.setContent(content); Dialog.__count++; Dialog.__zindex++; } Dialog.__zindex = 500; Dialog.__count = 1; Dialog.version = '1.0 beta'; function dialog(content, options) { var dlg = new Dialog(content, options); dlg.show(); return dlg; }

@charset "utf-8"; .dialog-overlay { opacity:0.5; filter:alpha(opacity:50); background:gray; } .dialog { /*border:5px solid rgba(200,200,200,0.9);*/ background:gray; padding:10px; opacity:0.9; filter:alpha(opacity:70); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; _width:expression('200px'); /* IE6下不指定此值，会一直粘在右侧 */ } .dialog .bar { cursor:move; color:#fff; background:#000; padding:6px; min-height:15px; /* 不指定此值，在title和closeText都为空的情况下，可能移动条会消失不见 */ _height:expression('20px'); /* ie6下不指定高度，标题栏会变得很小 */ } .dialog .bar .title { float:left; margin-right:10px; } .dialog .bar .close { float:right; cursor:pointer; text-decoration:underline; } .dialog .content { background:#fff; padding:10px; } .dialog iframe { height:100%; width:100%; } /* 指定图像最大尺寸，不需要可以删除。 */ .content img { overflow:auto; max-width:700px; max-height:500px; /* IE6版的max-width和max-height，但是也会有点BUG在图片太小时，也会显示最大值，需要同时指定width和height */ _width:expression((document.body.clientWidth > 700) ? '700px' : 'auto'); _height:expression((document.body.clientHeight > 500) ? '500px' : 'auto'); }