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

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

页面截图