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

巴特西

jquery拓展插件-popup弹窗

最新文章

热门文章