《jQuery 弹出层插件(推举)_.docx》由会员分享，可在线阅读，更多相关《jQuery 弹出层插件(推举)_.docx（11页珍藏版）》请在三一文库上搜索。
1、jQuery 弹出层插件(推举)_ 下面我就为大家带来一篇深化理解jQuery中的大事冒泡。我觉得挺不错的，现在分享给大家，也给大家做个参考。 最近在讨论弹出层插件时发觉网上许多插件功能很强大，同时插件也很浩大。在这里个人写了一个比较秀珍的弹出层插件。 jquery.popdialog.js $(function () $.fn.PopDialog = function (options) var defaults = Event: click, /触发响应大事 title: title, /弹出层的标题 type: text, /弹出层类型(text、容器ID、URL、Iframe) con
2、tent: content, /弹出层的内容(text文本、容器ID名称、URL地址、Iframe的地址) width: 500, /弹出层的宽度 height: 400, /弹出层的高度 scrollTop: 200, /层滑动的高度也就是弹出层时离顶部滑动的距离 isAuto: false, /是否自动弹出 time: 2021, /设置自动弹出层时间，前提是isAuto=true isClose: false, /是否自动关闭 timeOut: 2021 /设置自动关闭时间，前提是isClose=true ; var options = $.extend(defaults, option
3、s); $(body).prepend(div id=floatBoxBg/divdiv id=floatBox class=floatBoxdiv class=titleh4/h4span id=closeDialogX/span/divdiv class=content/div/div); var $this = $(this); /当然响应大事对象 var $blank = $(#floatBoxBg); /遮罩层对象 var $title = $(#floatBox .title h4); /弹出层标题对象 var $content = $(#floatBox .content); /
4、弹出层内容对象 var $dialog = $(#floatBox); /弹出层对象 var $close = $(#closeDialog); /关闭层按钮对象 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 () $blank.animate( opacity: 0 , nor
5、mal, function () $(this).hide(); ); $dialog.animate( top: ($(document).scrollTop() - parseInt(options.height) + px , normal, function () $(this).hide(); ); if (st) clearTimeout(st); /清除定时器 if (stc) clearTimeout(stc); /清除定时器 ); $content.css(height, parseInt(options.height) - 70); /文本框绑定大事 $this.live(
6、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: /当类
7、型是容器ID的时候 $content.html($(# + options.content + ).html(); break; case iframe: /当类型是Iframe的时候 $content.html(iframe src= + options.content + width=100% height= + (parseInt(options.height) - 70) + px + scrolling=auto frameborder=0 marginheight=0 marginwidth=0/iframe); break; default: /默认状况下的时候 $content
8、.html(options.content); break; $blank.show(); $blank.animate( opacity: 0.5 , normal); $dialog.css( display: block, left: ($(document).width() / 2 - (parseInt(options.width) / 2) + px, top: ($(document).scrollTop() - parseInt(options.height) + px, width: options.width, height: options.height ); $dial
9、og.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); ); 配套的css： * padding:
10、 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; .floatBox border: #9CC95F 5px solid; position: fixed !important; /*ie7 ff*/ position: absolute; top
11、: 50px; left: 40%; background: #fff; display: none; .floatBox .title height: 23px; padding: 7px 10px 0; color: #fff; background-attachment: scroll; background: #9CC95F; background-repeat: repeat-x; background-position: 0px 0px; .floatBox .title h4 float: left; padding: 0; margin: 0; font-size: 14px;
12、 line-height: 16px; .floatBox .title span float: right; cursor: pointer; .floatBox .content padding: 20px 15px; 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: bol
13、d; color: #fff; margin-top: -5px; 最终的html示例： !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l head title/title script type=text/javascript src=./js/jquery-1.7.min.js/script script type=text/javascript src=jquery.popdialog.js/script link type=text/c
14、ss rel=stylesheet href=popdialog.css / /head body div id=test弹出层插件测试/div div id=detail style=display: none; 欢迎各位网友用法弹出层插件demo /div script type=text/javascript $(function () $(#test).PopDialog( Event: click, /触发响应大事 title: 弹出层插件, /弹出层的标题 type: id, /弹出层类型(text、容器ID、URL、Iframe) content: detail, /弹出层的内容
15、猎取(text文本、容器ID名称、URL地址、Iframe的地址) width: 500, /弹出层的宽度 height: 300, /弹出层的高度 scrollTop: 200, /层滑动的高度也就是弹出层时离顶部滑动的距离 isAuto: true, /是否自动弹出 time: 2021, /设置弹出层时间，前提是isAuto=true isClose: false, /是否自动关闭 timeOut: 5000 /设置自动关闭时间，前提是isClose=true ); ); /script /body /html 以上所述是我给大家介绍的jQuery 弹出层插件(推举)的相关学问，盼望对大家有所关心 .