正文 8282字数 384,971阅读


css myAlert.css
*{margin: 0;padding: 0;} .clearfix:after{content: '';display: table;width: 100%;clear: both;} .myModa{position: fixed;top: 0;left: 0;bottom: 0;right:0;background: rgba(0,0,0,0.2); } .myModa .myAlertBox{width: 300px;border-radius: 5px;border: 1px solid #d9d9d9;background: #fff;overflow: hidden;margin: 0 auto; } .myModa .myAlertBox h6{background: #f2f2f2;padding: 10px;line-height: 20px;font-size: 16px;text-align: center;} .myModa .myAlertBox p{padding: 20px;line-height: 26px;font-size: 14px;color: #808080;} .myModa .myAlertBox .btn{cursor: pointer; width: 80px;line-height: 36px;border-radius: 5px;text-align: center;font-size: 16px;margin: 0 auto;margin-bottom: 20px; background: #D9D9D9;} .myModa .myAlertBox .col2 .col{width:120px;float: left;} .myModa .myAlertBox .col2 .col .btn{width: 100%;} .myModa .myAlertBox .col2{padding: 0 20px;} .myToast{position: fixed; display: inline-block;padding: 5px 10px;line-height: 24px;font-size: 14px;color: #fff;background:#000; max-width: 300px;_width: expression(this.offsetWidth >300 ? '300px': 'auto' );*width: expression(this.offsetWidth >300 ? '300px': 'auto' );border-radius: 5px;}
Run code
Cut to clipboard

    js myAlert.js
    (function() { $.extend({ myAlert: function(options) {//参数格式{title:'Title',message:'message',callback:function(){alert('callback')}}or"需要提示的话" var option={title:"提示",message:"程序员太傻，忘记输入提示内容啦……",callback:function(){}} if(typeof(options)=="string"){ option.message=options }else{ option=$.extend(option,options); } var top=$(window).height()*0.3; $('body').append('<div class="myModa"><div class="myAlertBox" style="margin-top:'+top+'px"><h6>'+option.title+'</h6><p>'+option.message+'</p><div class="btn sure">确定</div></div></div>'); $('.btn.sure').click(function(){ $('.myModa').remove(); option.callback(); }) }, myConfirm: function(options) {//参数格式{title:'Title',message:'message',callback:function(){alert('callback')}}or"需要提示的话"$.myConfrim() var option={title:"提示",message:"程序员太傻，忘记输入提示内容啦……",callback:function(){}} if(typeof(options)=="string"){ option.message=options }else{ option=$.extend(option,options); } var top=$(window).height()*0.3; $('body').append('<div class="myModa"><div class="myAlertBox" style="margin-top:'+top+'px"><h6>'+option.title+'</h6><p>'+option.message+'</p><div class="col2"><div class="col" style="margin-right: 20px;"><div class="btn exit">取消</div></div><div class="col"><div class="btn sure">确定</div></div></div></div></div>'); $('.btn.exit').click(function(){ $('.myModa').remove(); }) $('.btn.sure').click(function(){ $('.myModa').remove(); option.callback(); }) }, myToast:function(message){ var top=$(window).height()*0.3; $('body').append('<div class="myToast">'+message+'</div>'); console.log($('.myToast').outerWidth()) var top=($(window).height()-$('.myToast').height())/2; var left=($('body').width()-$('.myToast').width())/2; $('.myToast').css({'top':top+'px','left':left+'px'}); setTimeout(function(){ $('.myToast').fadeOut(300); setTimeout(function(){ $('.myToast').remove(); },300) },1000) } }); })(jQuery)
    Run code
    Cut to clipboard

      完整代码示例
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery确认提示框插件myAlert</title> <style> *{margin: 0;padding: 0;} .clearfix:after{content: '';display: table;width: 100%;clear: both;} .myModa{position: fixed;top: 0;left: 0;bottom: 0;right:0;background: rgba(0,0,0,0.2); } .myModa .myAlertBox{width: 300px;border-radius: 5px;border: 1px solid #d9d9d9;background: #fff;overflow: hidden;margin: 0 auto; } .myModa .myAlertBox h6{background: #f2f2f2;padding: 10px;line-height: 20px;font-size: 16px;text-align: center;} .myModa .myAlertBox p{padding: 20px;line-height: 26px;font-size: 14px;color: #808080;} .myModa .myAlertBox .btn{cursor: pointer; width: 80px;line-height: 36px;border-radius: 5px;text-align: center;font-size: 16px;margin: 0 auto;margin-bottom: 20px; background: #D9D9D9;} .myModa .myAlertBox .col2 .col{width:120px;float: left;} .myModa .myAlertBox .col2 .col .btn{width: 100%;} .myModa .myAlertBox .col2{padding: 0 20px;} .myToast{position: fixed; display: inline-block;padding: 5px 10px;line-height: 24px;font-size: 14px;color: #fff;background:#000; max-width: 300px;_width: expression(this.offsetWidth >300 ? '300px': 'auto' );*width: expression(this.offsetWidth >300 ? '300px': 'auto' );border-radius: 5px;}</style> <script type="text/javascript" src="https://lizhenqiu.com/templates/default/jquery.min.js"></script> <script>(function() { $.extend({ myAlert: function(options) {//参数格式{title:'Title',message:'message',callback:function(){alert('callback')}}or"需要提示的话" var option={title:"提示",message:"程序员太傻，忘记输入提示内容啦……",callback:function(){}} if(typeof(options)=="string"){ option.message=options }else{ option=$.extend(option,options); } var top=$(window).height()*0.3; $('body').append('<div class="myModa"><div class="myAlertBox" style="margin-top:'+top+'px"><h6>'+option.title+'</h6><p>'+option.message+'</p><div class="btn sure">确定</div></div></div>'); $('.btn.sure').click(function(){ $('.myModa').remove(); option.callback(); }) }, myConfirm: function(options) {//参数格式{title:'Title',message:'message',callback:function(){alert('callback')}}or"需要提示的话"$.myConfrim() var option={title:"提示",message:"程序员太傻，忘记输入提示内容啦……",callback:function(){}} if(typeof(options)=="string"){ option.message=options }else{ option=$.extend(option,options); } var top=$(window).height()*0.3; $('body').append('<div class="myModa"><div class="myAlertBox" style="margin-top:'+top+'px"><h6>'+option.title+'</h6><p>'+option.message+'</p><div class="col2"><div class="col" style="margin-right: 20px;"><div class="btn exit">取消</div></div><div class="col"><div class="btn sure">确定</div></div></div></div></div>'); $('.btn.exit').click(function(){ $('.myModa').remove(); }) $('.btn.sure').click(function(){ $('.myModa').remove(); option.callback(); }) }, myToast:function(message){ var top=$(window).height()*0.3; $('body').append('<div class="myToast">'+message+'</div>'); console.log($('.myToast').outerWidth()) var top=($(window).height()-$('.myToast').height())/2; var left=($('body').width()-$('.myToast').width())/2; $('.myToast').css({'top':top+'px','left':left+'px'}); setTimeout(function(){ $('.myToast').fadeOut(300); setTimeout(function(){ $('.myToast').remove(); },300) },1000) } }); })(jQuery) </script> </head> <body> <center> <button onClick="$.myAlert('这里是提示框内的内容');">点击弹出提示框</button><br/><br/> <button onClick="$.myAlert({title:'Title',message:'message',callback:function(){alert(1)}});">点击弹出提示框(带有callback)</button><br/><br/> <button onClick="$.myConfirm({title:'确认框提示标题',message:'确认框提示内容',callback:function(){alert('callback')}})">点击弹出确认框</button><br/><br/> <button onClick="$.myToast('提示内容')">点击弹出自动消失的提示</button><br/><br/> </center> </body> </html>
      Run code
      Cut to clipboard