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">&#xe606;</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);

转载于:https://www.cnblogs.com/ss977/p/6593965.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值