jquery拓展插件-popup弹窗

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:

<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>

<script>
$(function(){

$(".add").click(function(){        $("#popup").popShow({            url : "",            title : "编辑",            width : 800,            height: 700        });    });

$("#btnOpen").delegate("","click",function(){        $(".popup1").popShow({            url : "",            title : "编辑111111",            width : 600,            height: 500        });    });

$("#btnOpen1").delegate("","click",function(){        $("#iframe").popShow({            url : "https://www.baidu.com",            title : "详情页"        });    });

});
</script>以下为插件内容:

(function($){

$.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");

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);

时间: 2024-11-09 10:27:02

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

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

<script type="text/JavaScript">            //jQuery插件的写法(需要传入操作对象)        ;(function($)        {            //PI_TestPlugIn为插件名称,也是插件的操作对象            //为了不会与其它插件名重复,这里我使用PlugIn的缩写PI_来定义插件对象前缀            $.fn.PI_TestPlugIn=               { 

Jquery Media插件使用,解决在线预览及打开PDF文件

用到过PDF的媛媛and猿猿们,总会发现这大千世界之万能播放器插件,总能少了对媒体控制的接口. 你总会发现PDF无法像img图片一样正常加载展现出来,那么我们在通用语法的基础上拓展出了适用于预览及打开的PDF插件便于开发应用. 最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverl

实用的 jquery 小插件

1 /** 2 * ---------------------------------------------------- 3 * 实用的 jquery 插件方法 4 * @QQ 617937424 5 * @寄语 不要重复写同样的代码,学会封装成方法,慢慢积累,提高效率. 6 * ---------------------------------------------------- 7 */ 8 9 10 /** 11 * 全选/反选 12 * 13 * html结构: 14 <div i

jquery自定义插件——window的实现

本例子实现弹窗的效果: 1.jquery.show.js /* * 开发者:lzugis * 开发时间:2014年6月10日 * 实现功能:点击在鼠标位置显示div * 版本序号:1.0 */ (function($){ $.fn.showDIV = function(options){ var defaults = {}; var options = $.extend(defaults, options); var showdiv=$(this); var close, title, cont

FancyBox - 经典的 jQuery Lightbox 插件

FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应功能.主要特色: ?  能够显示图片.HTML 元素.SWF 影片.iframe 框架和 Ajax 请求的内容 ?  可以通过配置和 CSS 自定义外观和功能 ?  一组内容可以实现导航 ?  支持滚动事件驱动浏览 ?  在放大项目下方有漂亮的投影 效果演示     插件下载 您可能感兴趣的相关文章

jQuery.fly插件实现添加购物车抛物线效果

样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始位置创建一个 document 对象,作为红色小球: 通过 jQuery.fly 插件提供的fly函数来移动小球,移动至终止位置: 当小球到达终止位置后,通过fly插件提供的 onEnd 回调函数,将小球销毁: Demo 源码: <!DOCTYPE html> <html lang=&quo

asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后用JS来算出每页多高,按照每张纸的高度来进行适当的增减高度.(这种方式缺点就是只能针对单中类型的纸张,计算十分的繁琐,要些很多加减法 -_-);). 参考A4纸高度的网页:http://www.jb51.net/office/word/67360.html 2.在如上一个思路的方式,试着查找能不能自

jquery.cookie插件使用

jquery.cookie插件是一个在浏览器端对cookie进行操作的,使用非常方便. jquery.cookie中的操作: jquery.cookie.js插件:百度即可下载 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie. 创建一个持久cookie: $.cookie(‘cookieName’,'cookieValue’,{ex

jQuery验证插件

学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验. 一.使用 validate.js 插件 官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是valida