1. css:<style> /* 公共弹出层 */ .popWrap{position: fixed;left: 0;top: 0; width: 100%;height: 100%;z-index: 1000000;} .popMask{width:100%;height:100%;background-color:#ddd;filter:Alpha(opacity=50);-moz-opacity:0.5;opacity:0.5; } .popMask iframe,.popMain .popCont iframe{ width: 100%;height: 100%;border: 0 none; } .popMain{ position: absolute;left: 50%;top: 50%;background-color: #fff;z-index: 1000001; border: 1px solid #2d2d2d;} .popMain .popTit { background-color: #2d2d2d;color: #fff;font-size: 12px;height: 28px;line-height: 28px;padding-left: 12px;padding-right: 12px;} .popMain .popTit .close{ font-family: iconfont; font-size: 12px;cursor: pointer;color: #fff; } .popMain .popTit .close:hover{ color: #fff; } .popMain .popCont {} .popMain .popCont .popLoading { margin: 10px ;}</style>

html:

  1. <button id="btnAdd" class="add">添加</button><div id="popup" style="display: none;"> <div class="popLoading">加载中...</div> <h1>welcome</h1> <button id="btnOpen">打开</button> <button id="btnCancle">取消</button></div><div class="popup1" style="display: none;"> <h1>hello world</h1> <button id="btnOpen1">打开1</button></div><iframe src="" frameborder="0" scrolling="0" id="iframe" style="display: none;"></iframe>
  2.  
  3. <script>
  1. $(function(){
  2.  
  3. $(".add").click(function(){ $("#popup").popShow({ url : "", title : "编辑", width : 800, height: 700 }); });
  4.  
  5. $("#btnOpen").delegate("","click",function(){ $(".popup1").popShow({ url : "", title : "编辑111111", width : 600, height: 500 }); });
  6.  
  7. $("#btnOpen1").delegate("","click",function(){ $("#iframe").popShow({ url : "https://www.baidu.com", title : "详情页" }); });
  8.  
  9. });
  1. </script>以下为插件内容:

(function($){

  1. $.fn.popShow = function (opitons) { var defaults = { url: "", title: "", width: "800", height: "600" }; var settings = $.extend({}, defaults, opitons); this.each(function () { var tac = $(this), url = settings.url, title = settings.title, width = settings.width, height = settings.height; var tag = $('<div class="popWrap"><div class="popMask" ><iframe scrolling="no"src="about:blank"></iframe></div><div class="popMain" style="width: ' + width + 'px;height: ' + height + 'px;margin-left:-' + width / 2 + 'px;margin-top:-' + height / 2 + 'px"><div class="popTit"><a class="close fr"></a><span>' + (title ? title : '') + '</span></div><div class="popCont"></div></div></div>').appendTo("body");
  2.  
  3. tag.find(".close").click(function () { tac.popHide(); }); tag.find(".popCont").append($(this).show()); if ($.trim(url).length != 0) { tac.prop("src", url); } return this; }); }; //关闭弹窗 $.fn.popHide = function () { var tab = $(this).closest('.popWrap'); $(this).hide().appendTo('body'); tab.remove(); return this; };

})(jQuery);

jquery拓展插件-popup弹窗的更多相关文章

  1. jQuery扩展插件和拓展函数的写法

    <script type="text/JavaScript">            //jQuery插件的写法(需要传入操作对象)        ;(function ...

  2. 利用HttpWebRequest模拟表单提交 JQuery 的一个轻量级 Guid 字符串拓展插件. 轻量级Config文件AppSettings节点编辑帮助类

    利用HttpWebRequest模拟表单提交   1 using System; 2 using System.Collections.Specialized; 3 using System.IO; ...

  3. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  4. FancyBox - 经典的 jQuery Lightbox 插件

    FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...

  5. 9款风格华丽的jQuery/CSS3插件

    今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧. 1.jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚 ...

  6. 手把手教你实现 Google 拓展插件(转自实验楼)

    一.课程简介 1.1 实验介绍 本课程的实验环境由实验楼提供,Google 浏览器拓展的运行环境为 Google 浏览器.在本实验中,你将了解如何制作一个属于你自己的 Google 拓展插件. 课程实 ...

  7. jQuery扩展插件

    jQuery有多好用,大家有目共睹的,但是有时候不是每个功能都是万能的,有时候我们需要实现自己的功能,jQuery提供了很好的拓展功能,我们可以去拓展插件,更好的利用jQuery 查看官网,可知,有两 ...

  8. 第一百七十六节,jQuery,插件

    jQuery,插件 学习要点: 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件 插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编 ...

  9. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

随机推荐

  1. Spring 测试框架testContext代码举例

    import javax.annotation.Resource; import org.junit.Test; import org.springframework.context.annotati ...

  2. [1-7] 把时间当做朋友(李笑来)Chapter 7 【从此时此刻开始改变】 摘录

    大多数事情都需要提前准备,也都可以提前准备.认识到这一点本身就几乎是一切改变的起点. 任何动作演练到一定的次数,就能做到甚至在无意识的情况下都可以准确完成的地步.而他只不过是把这个原理应用到了极致而已 ...

  3. LoadRunner+Java接口性能测试

    想必各位小伙伴们会对LR还可以调用java感到好奇,之前我也这么一直认为LR只支持C语言.其实LR脚本支持的语言有:C.Java.Visual Basic.VbScript.JavaScript,只不 ...

  4. <转>c++ builder JSONCPP 注意事项 XE2 解决编译问题 _Mfl

    在C++Builder中使用JSONCPP需要注意的问题 1.使用STL的MAP而不是内建的MAP这个问题实际上和编译器无关.内建的MAP不是很稳定,当解析数据大于600K左右时,会崩溃.虽然一般来说 ...

  5. Java代码Bug分析插件 FindBugs

    http://www.oschina.net/p/findbugs FindBugs是一个能静态分析源代码中可能会出现Bug的Eclipse插件工具.

  6. margin: 0px auto; center 行类 块级

    <html> <head> <title> biaoti </title> </head> <body style="bor ...

  7. C# NPOI操作Excel(下)

    根据自己项目需求编写,仅供参考 个人建议:使用Excel模板进行导出操作.尽量避免自己生成Excel(既繁琐又容易出BUG).大多情况下导出Excel都是固定格式,使用模板导出会方便很多. publi ...

  8. nvidia显卡驱动卸载和卸载后的问题

     因为装了nvidia显卡驱动后开机一直处于循环登录界面.password输入正确也是进不去.然后就决定卸载nvidia显卡驱动.安装之后出现还是循环登陆. 是openGL的问题 有至少两种解决方 ...

  9. curl 重定向问题

    今天在curl一个网站的时候遇到一个奇怪的问题,下面是输出: lxg@lxg-X240:~$ curl -L http://www.yngs.gov.cn/ -v * Hostname was NOT ...

  10. ant用途及简单实现

    ant用途及简单实现 标签: antjavadeletejarbuildjavaee 2012-07-17 14:15 5945人阅读 评论(0) 收藏 举报  分类: other(6)  Ant工具 ...