最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大。在这里个人写了一个比较秀珍的弹出层插件。
jquery.popdialog.js
$(function () { $.fn.PopDialog = function (options) { var defaults = { Event: "click", //触发响应事件 title: "title", //弹出层的标题 type: "text", //弹出层类型(text、容器ID、URL、Iframe) content: "content", //弹出层的内容(text文本、容器ID名称、URL地址、Iframe的地址) width: 500, //弹出层的宽度 height: 400, //弹出层的高度 scrollTop: 200, //层滑动的高度也就是弹出层时离顶部滑动的距离 isAuto: false, //是否自动弹出 time: 2000, //设置自动弹出层时间,前提是isAuto=true isClose: false, //是否自动关闭 timeOut: 2000 //设置自动关闭时间,前提是isClose=true }; var options = $.extend(defaults, options); $("body").prepend("<div id='floatBoxBg'></div><div id='floatBox' class='floatBox'><div class='title'><h4></h4><span id='closeDialog'>X</span></div><div class='content'></div></div>"); var $this = $(this); //当然响应事件对象 var $blank = $("#floatBoxBg"); //遮罩层对象 var $title = $("#floatBox .title h4"); //弹出层标题对象 var $content = $("#floatBox .content"); //弹出层内容对象 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" }, "normal", 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(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) - 70) + "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)) + "px", top: ($(document).scrollTop() - parseInt(options.height)) + "px", width: options.width, height: options.height }); $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); } } });
配套的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; } .floatBox { border: #9CC95F 5px solid; position: fixed !important; /*ie7 ff*/ position: absolute; top: 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; 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: bold; color: #fff; margin-top: -5px; }
最终的html示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.min.js">以上所述是小编给大家介绍的jQuery 弹出层插件(推荐)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《绝对主打 流行原创金曲 2CD》[WAV分轨][1.1GB]
- 《赛博朋克2077》更新上线:支持AMD FSR3
- 《塞尔达传说:智慧的再现》提前半个月偷跑,引发玩家担忧
- 战锤40K星际战士2全职业介绍|全职业技能效果一览
- 陈百强《2006世纪10星·永恒篇[环球]》[WAV整轨]
- 【新世纪钢琴】VA-GoldenOctober(Piano)(金秋十月钢琴篇)【FLAC】
- 青稞荞麦《破茧》新生代组合[WAV+CUE]
- 因系统升级后出现BUG 《FF16》PS5完全版宣布延期
- 《黑神话:悟空》周伯通!大佬用左右手分别挑战两只虎先锋
- 《黑神话:悟空》攻击动作致敬《大话西游》:这也太帅了!
- 《星舰铳犬太阳系物语》游戏背景介绍
- 《战锤40K星际战士2》终极版有后续DLC说明
- 《第9层》游戏特色玩法介绍
- 刀郎.2006-刀郎【九雨天下】【WAV+CUE】
- 59.9高校生.1994-素兰万岁【上华】【WAV+CUE】