弹窗插件
序:写这个插件的目的主要是为了方便自己的在项目中使用,因为我们公司项目的需求方很少允许使用第三方的插件。 所有插件要求自己写,不许使用其他的cdn资源,所以一般我们就自己写插件。
简单调用插件
打开弹窗:
function popShow(id) {
popHide();
$('body').addClass('overflow')
var p = $('#'+id);
popDom = p;
if (p) {
setTimeout(function(){
(id=='popYuyue') && g.loadJyPlus() //加载极验
var css = {
position: 'fixed',
top: '50%',
left: '50%',
marginTop: -popDom.height() / 2 + 'px',
marginLeft: -popDom.width() / 2 + 'px',
opacity:1,
zIndex: 998
};
if(id=='popRulesInfo'){
css = {
position: 'fixed',
bottom: 0,
left: '50%',
marginLeft: -popDom.width() / 2 + 'px',
opacity:1,
zIndex: 998
}
}
p.fadeIn(200).css(css);
p.attr('for', 'pop');
popIsShow = true;
if ($('[for="' + id + '"]').length >= 1) return;
$('body').append('<div id="_overlay" name="overlay" for=' + id + ' style="width:100%;height:100%;position:fixed;top:0;left:0;z-index:997;background:rgba(0,0,0,0.6);"></div>');
//$('#_overlay').on('click',function(){popHide();})
},200)
}
}
关闭弹窗:
function popHide() {
$('[for="pop"]').fadeOut(100,function(){$('[for="pop"]').attr('style', '')});
$('[name="overlay"]').fadeOut(100,function(){$('[name="overlay"]').remove()});
$('body').removeClass('overflow')
}
jq插件
注意:该插件是基于jq。该插件无需其他的css文件。
$.extend({
//采用打开新弹窗就对应提高遮罩层的zIndex,当关闭最新的弹窗时就降低遮罩层的zIndex
"layer": {
open: function (_el,option) {
var opt = $.extend(true, {fixed: true, opacity: 0.7, position: 'm'}, option)
if (!_el) { return; }
//找到所有弹出层最大的zIndex,然后新增的就+1
var arr = [] //用来存放所有弹出层的zIndex
$('[for="pop"]').each(function(index,item){
arr.push($(item).css('zIndex')? parseInt($(item).css('zIndex')):0)
})
var max_zIndex = (arr.length==0) ? 999: Math.max.apply(null, arr); //当前最大的zIndex
var el = $(_el);
var overlay = $('<div></div>')
var g = function() {
el.css({
position: opt.fixed ? "fixed" : "absolute",
zIndex: max_zIndex + 1,
top: opt.position == 'm' ? '50%' : '',
bottom: opt.position == 'b' ? '0' : '',
left: '50%',
marginLeft: -el.width() / 2,
marginTop: -el.height() / 2
}).attr('for', 'pop').show();
if ($('[for="overlay"]').length == 0) {
overlay.css({
width: '100%',
height: '100%',
position: 'fixed',
zIndex: max_zIndex,
top: 0,
left: 0,
background: '#000',
opacity: opt.opacity
}).attr('for', 'overlay');
$('body').append(overlay);
}
else {
$('[for="overlay"]').css({zIndex: max_zIndex, opacity: opt.opacity});
}
};
g();
$(window).on('resize orientationchange', function () {
g();
setTimeout(g, 300);
});
},
close: function (_el) {
//如果当前只有最后一个弹窗了,则在关闭弹窗时去掉遮罩层
if(_el) {
//关闭单个弹窗
$(_el).removeAttr('for').hide(); //先隐藏弹框
//判断是否需要关闭遮罩层:如果当前还有其他弹框存在则不关闭遮罩层,如果没有弹窗存在了就关闭遮罩层
//找到所有弹出层最大的zIndex,然后新增的就+1
var arr = [] //用来存放所有弹出层的zIndex
$('[for="pop"]').each(function (index, item) {
arr.push($(item).css('zIndex') ? parseInt($(item).css('zIndex')) : 0)
})
var max_zIndex = (arr.length == 0) ? 999 : Math.max.apply(null, arr); //当前最大的zIndex
$('[for="overlay"]').css({zIndex: max_zIndex - 1}) //降低overlay的层级
if ($('[for="pop"]').length == 0) {$('[for="overlay"]').remove();}
}
else{
//关闭所有弹窗
$('[for="pop"]').removeAttr('for').hide();
$('[for="overlay"]').remove();
}
}
}
});
使用方法:
打开弹窗:
基本用法:$.layer.open('id或.class或者其他jq')
如果你想对弹窗是否固定在屏幕中间、遮罩层的透明度、弹窗的位置进行控制,可以考虑使用open方法的第二个参数,例如:$.layer.open('id或.class或者其他jq',{fixed: true, opacity: 0.2, position: 'm'})
关闭弹窗:$.layer.close()
,关闭所有弹窗,可以直接使用该方法; 如果要关闭指定弹窗,需要添加一个参数:$.layer.close('id或.class或者其他jq')