轻量级的 jquery 自定义弹窗插件 用法简单

时间:2021-11-26 00:26:53

jq封装
(function () {
$.fn.alert = function (e) { var fn = this; $(fn).show();
$(fn).find('i.off').is('.off')?'':$(fn).append('<i class="off" style="cursor:pointer;display:inline-block;font-style:normal;color:#ff0;position:absolute;top:0;right:0;">&times;</i>');
$(this).css({
'display': 'block', 'min-width':' 300px', 'min-height': '200px', 'position':'fixed', 'left':'50%', 'top': '50%','z-index':'999', 'border': '1px solid rgba(111,111,111,.3)',
'-webkit-transform': 'translate(-50%,-50%)', '-moz-transform': 'translate(-50%,-50%)', '-ms-transform': 'translate(-50%,-50%)', '-o-transform':'translate(-50%,-50%)',
'transform':'translate(-50%,-50%)'
});
$(this).find('.off').off('click');$(this).find('.ok').off('click');$(this).find('.yes').off('click');$(this).find('.no').off('click'); //清除点击事件【防重复点击】;
$(this).find('.off').one("click",function(){ return $(fn).hide(); }); $(this).find('.ok').one("click",function(){ if(typeof(e) == 'function'){ e(); } return $(fn).hide(); });
$(this).find('.no').one("click",function(){ return $(fn).hide(); }); $(this).find('.yes').one("click",function(){ if(typeof(e) == 'function'){ e(); } return $(fn).hide(); });
}
})(jQuery);

jquery使用
$(function () {
$('ul li').click(function () { var fn = this;
$('.jquery_alert').alert(function () { console.log(fn); }); //$('.jquery_alert').alert(); //点击了确认后执行内部函数
});
});

jquery使用说明 【需要jquery支持】
1.   先写好弹窗需要的样式
2.   在把写好的弹窗样式的用jquery 的DOM节点引用插件                            【如果你已引入了其他相同插件名的插件,可修改成其他插件名】
3.   把写好的弹窗样式处添加上  display:none; css样式

页面截图
轻量级的 jquery 自定义弹窗插件   用法简单
轻量级的 jquery 自定义弹窗插件   用法简单