dialog插件demo

2022-09-18 09:52:26

基本操作

默认窗体
    1. new Dialog('这是一个默认对话框').show();
非模态对话框
  1. new Dialog('非模态对话框，可以打开多个！',{modal:false}).show();


自动关闭
  1. new Dialog('5秒后自动关闭',{time:5000}).show();
非fixed模式
  1. new Dialog('对话框不随滚动条移动',{fixed:false}).show();



显示指定ID的内容
  1. // 将显示本标签内的内容。
  2. new Dialog({type:'id',value:'content-type-id'}).show();



加载一张图片
  1. new Dialog({type:'img',value:'http://www.caixw.com/public/uploads/demo/images/300x125.gif'}).show();



加载一URL到iframe
  1. new Dialog({type:'iframe',value:'http://www.caixw.com'}).show();
加载一URL地址
  1. new Dialog({type:'url',value:'http://www.caixw.com/public/uploads/demo/jquery/dialog/test.html'}).show();
 

自定义CSS

自定义背景遮盖层
  1. #dialog1-overlay
  2. {
  3. background:blue;
  4. opacity:0.8;
  5. filter:alpha(opacity=80);
  6. }
自定义内容部分背景
  1. #dialog2 .content
  2. {
  3. width:250px;
  4. height:80px;
  5. background-image:url(http://www.caixw.com/public/uploads/demo/images/300x125.gif);
  6. }

回调函数

show()函数
  1. new Dialog('show()回调函数'
  2. {beforeShow:function(){alert('before show'),return true},afterShow:function(){alert('after show');}})
  3. .show();
hide()函数
  1. dlg = new Dialog('hide()回调函数'
  2. {beforeHide:function(){alert('before hide'),return true},afterHide:function(){alert('after hide');}})
  3. .show();
  4. dlg.hide();
close()函数
  1. new Dialog('close()回调函数'
  2. {beforeClose:function(){alert('before close'),return true},afterClose:function(){alert('after close');}})
  3. .show();
js
  1. /**
  2. * Dialog
  3. *
  4. * @author    caixw <http://www.caixw.com>
  5. * @copyright Copyright (C) 2010, http://www.caixw.com
  6. * @license   FreeBSD license
  7. */
  8. /**
  9. * jQuery的Dialog插件。
  10. *
  11. * @param object content
  12. * @param object options 选项。
  13. * @return
  14. */
  15. function Dialog(content, options)
  16. {
  17. var defaults = { // 默认值。
  18. title:'标题',       // 标题文本，若不想显示title请通过CSS设置其display为none
  19. showTitle:true,     // 是否显示标题栏。
  20. closeText:'[关闭]', // 关闭按钮文字，若不想显示关闭按钮请通过CSS设置其display为none
  21. draggable:true,     // 是否移动
  22. modal:true,         // 是否是模态对话框
  23. center:true,        // 是否居中。
  24. fixed:true,         // 是否跟随页面滚动。
  25. time:0,             // 自动关闭时间，为0表示不会自动关闭。
  26. id:false            // 对话框的id，若为false，则由系统自动产生一个唯一id。
  27. };
  28. var options = $.extend(defaults, options);
  29. options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID
  30. var overlayId = options.id + '-overlay'; // 遮罩层ID
  31. var timeId = null;  // 自动关闭计时器
  32. var isShow = false;
  33. var isIe = $.browser.msie;
  34. var isIe6 = $.browser.msie && ('6.0' == $.browser.version);
  35. /* 对话框的布局及标题内容。*/
  36. var barHtml = !options.showTitle ? '' :
  37. '<div class="bar"><span class="title">' + options.title + '</span><a class="close">' + options.closeText + '</a></div>';
  38. var dialog = $('<div id="' + options.id + '" class="dialog">'+barHtml+'<div class="content"></div></div>').hide();
  39. $('body').append(dialog);
  40. /**
  41. * 重置对话框的位置。
  42. *
  43. * 主要是在需要居中的时候，每次加载完内容，都要重新定位
  44. *
  45. * @return void
  46. */
  47. var resetPos = function()
  48. {
  49. /* 是否需要居中定位，必需在已经知道了dialog元素大小的情况下，才能正确居中，也就是要先设置dialog的内容。 */
  50. if(options.center)
  51. {
  52. var left = ($(window).width() - dialog.width()) / 2;
  53. var top = ($(window).height() - dialog.height()) / 2;
  54. if(!isIe6 && options.fixed)
  55. {   dialog.css({top:top,left:left});   }
  56. else
  57. {   dialog.css({top:top+$(document).scrollTop(),left:left+$(document).scrollLeft()});   }
  58. }
  59. }
  60. /**
  61. * 初始化位置及一些事件函数。
  62. *
  63. * 其中的this表示Dialog对象而不是init函数。
  64. */
  65. var init = function()
  66. {
  67. /* 是否需要初始化背景遮罩层 */
  68. if(options.modal)
  69. {
  70. $('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>');
  71. $('#' + overlayId).css({'left':0, 'top':0,
  72. /*'width':$(document).width(),*/
  73. 'width':'100%',
  74. /*'height':'100%',*/
  75. 'height':$(document).height(),
  76. 'z-index':++Dialog.__zindex,
  77. 'position':'absolute'})
  78. .hide();
  79. }
  80. dialog.css({'z-index':++Dialog.__zindex, 'position':options.fixed ? 'fixed' : 'absolute'});
  81. /*  IE6 兼容fixed代码 */
  82. if(isIe6 && options.fixed)
  83. {
  84. dialog.css('position','absolute');
  85. resetPos();
  86. var top = parseInt(dialog.css('top')) - $(document).scrollTop();
  87. var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
  88. $(window).scroll(function(){
  89. dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
  90. });
  91. }
  92. /* 以下代码处理框体是否可以移动 */
  93. var mouse={x:0,y:0};
  94. function moveDialog(event)
  95. {
  96. var e = window.event || event;
  97. var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
  98. var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
  99. dialog.css({top:top,left:left});
  100. mouse.x = e.clientX;
  101. mouse.y = e.clientY;
  102. };
  103. dialog.find('.bar').mousedown(function(event){
  104. if(!options.draggable){  return; }
  105. var e = window.event || event;
  106. mouse.x = e.clientX;
  107. mouse.y = e.clientY;
  108. $(document).bind('mousemove',moveDialog);
  109. });
  110. $(document).mouseup(function(event){
  111. $(document).unbind('mousemove', moveDialog);
  112. });
  113. /* 绑定一些相关事件。 */
  114. dialog.find('.close').bind('click', this.close);
  115. dialog.bind('mousedown', function(){  dialog.css('z-index', ++Dialog.__zindex); });
  116. // 自动关闭
  117. if(0 != options.time){  timeId = setTimeout(this.close, options.time);    }
  118. }
  119. /**
  120. * 设置对话框的内容。
  121. *
  122. * @param string c 可以是HTML文本。
  123. * @return void
  124. */
  125. this.setContent = function(c)
  126. {
  127. var div = dialog.find('.content');
  128. if('object' == typeof(c))
  129. {
  130. switch(c.type.toLowerCase())
  131. {
  132. case 'id': // 将ID的内容复制过来，原来的还在。
  133. div.html($('#' + c.value).html());
  134. break;
  135. case 'img':
  136. div.html('加载中...');
  137. $('<img alt="" />').load(function(){div.empty().append($(this));resetPos();})
  138. .attr('src',c.value);
  139. break;
  140. case 'url':
  141. div.html('加载中...');
  142. $.ajax({url:c.value,
  143. success:function(html){div.html(html);resetPos();},
  144. error:function(xml,textStatus,error){div.html('出错啦')}
  145. });
  146. break;
  147. case 'iframe':
  148. div.append($('<iframe src="' + c.value + '" />'));
  149. break;
  150. case 'text':
  151. default:
  152. div.html(c.value);
  153. break;
  154. }
  155. }
  156. else
  157. {   div.html(c); }
  158. }
  159. /**
  160. * 显示对话框
  161. */
  162. this.show = function()
  163. {
  164. if(undefined != options.beforeShow && !options.beforeShow())
  165. {   return;  }
  166. /**
  167. * 获得某一元素的透明度。IE从滤境中获得。
  168. *
  169. * @return float
  170. */
  171. var getOpacity = function(id)
  172. {
  173. if(!isIe)
  174. {   return $('#' + id).css('opacity');    }
  175. var el = document.getElementById(id);
  176. return (undefined != el
  177. && undefined != el.filters
  178. && undefined != el.filters.alpha
  179. && undefined != el.filters.alpha.opacity)
  180. ? el.filters.alpha.opacity / 100 : 1;
  181. }
  182. /* 是否显示背景遮罩层 */
  183. if(options.modal)
  184. {   $('#' + overlayId).fadeTo('slow', getOpacity(overlayId));   }
  185. dialog.fadeTo('slow', getOpacity(options.id), function(){
  186. if(undefined != options.afterShow){   options.afterShow(); }
  187. isShow = true;
  188. });
  189. // 自动关闭
  190. if(0 != options.time){  timeId = setTimeout(this.close, options.time);    }
  191. resetPos();
  192. }
  193. /**
  194. * 隐藏对话框。但并不取消窗口内容。
  195. */
  196. this.hide = function()
  197. {
  198. if(!isShow){ return; }
  199. if(undefined != options.beforeHide && !options.beforeHide())
  200. {   return;  }
  201. dialog.fadeOut('slow',function(){
  202. if(undefined != options.afterHide){   options.afterHide(); }
  203. });
  204. if(options.modal)
  205. {   $('#' + overlayId).fadeOut('slow');   }
  206. isShow = false;
  207. }
  208. /**
  209. * 关闭对话框
  210. *
  211. * @return void
  212. */
  213. this.close = function()
  214. {
  215. if(undefined != options.beforeClose && !options.beforeClose())
  216. {   return;  }
  217. dialog.fadeOut('slow', function(){
  218. $(this).remove();
  219. isShow = false;
  220. if(undefined != options.afterClose){   options.afterClose(); }
  221. });
  222. if(options.modal)
  223. {   $('#'+overlayId).fadeOut('slow', function(){$(this).remove();}); }
  224. clearTimeout(timeId);
  225. }
  226. init.call(this);
  227. this.setContent(content);
  228. Dialog.__count++;
  229. Dialog.__zindex++;
  230. }
  231. Dialog.__zindex = 500;
  232. Dialog.__count = 1;
  233. Dialog.version = '1.0 beta';
  234. function dialog(content, options)
  235. {
  236. var dlg = new Dialog(content, options);
  237. dlg.show();
  238. return dlg;
  239. }
css
  1. @charset "utf-8";
  2. .dialog-overlay
  3. {
  4. opacity:0.5;
  5. filter:alpha(opacity:50);
  6. background:gray;
  7. }
  8. .dialog
  9. {
  10. /*border:5px solid rgba(200,200,200,0.9);*/
  11. background:gray;
  12. padding:10px;
  13. opacity:0.9;
  14. filter:alpha(opacity:70);
  15. border-radius:3px;
  16. -moz-border-radius:3px;
  17. -webkit-border-radius:3px;
  18. _width:expression('200px'); /* IE6下不指定此值，会一直粘在右侧 */
  19. }
  20. .dialog .bar
  21. {
  22. cursor:move;
  23. color:#fff;
  24. background:#000;
  25. padding:6px;
  26. min-height:15px; /* 不指定此值，在title和closeText都为空的情况下，可能移动条会消失不见 */
  27. _height:expression('20px'); /* ie6下不指定高度，标题栏会变得很小 */
  28. }
  29. .dialog .bar .title
  30. {
  31. float:left;
  32. margin-right:10px;
  33. }
  34. .dialog .bar .close
  35. {
  36. float:right;
  37. cursor:pointer;
  38. text-decoration:underline;
  39. }
  40. .dialog .content
  41. {
  42. background:#fff;
  43. padding:10px;
  44. }
  45. .dialog iframe
  46. {
  47. height:100%;
  48. width:100%;
  49. }
  50. /* 指定图像最大尺寸，不需要可以删除。 */
  51. .content img
  52. {
  53. overflow:auto;
  54. max-width:700px;
  55. max-height:500px;
  56. /* IE6版的max-width和max-height，但是也会有点BUG在图片太小时，也会显示最大值，需要同时指定width和height */
  57. _width:expression((document.body.clientWidth > 700) ? '700px' : 'auto');
  58. _height:expression((document.body.clientHeight > 500) ? '500px' : 'auto');
  59. }
上一篇：jQuery UI dialog插件出错信息:$(this).dialog is not a function


下一篇：layer插件layer.photos()动态插入的图片无法正常显示