jquery模拟alert的弹窗插件

前端技术 2023/09/01 JavaScript

演示地址：

http://runjs.cn/detail/miwszbne

分享说明：

第N次造轮子了，只为最简单的调用，jquery模拟alert和confirm的弹窗插件

调用方法：

$.alert(\'your message\');

$.alert(\'your message\',function(){
 $.alert(\'click ok button\')
});

$.confirm(\'your message\');

$.confirm(\'your message\',function(result){
 if(result){
  $.alert(\'click ok button\')
 }else{
  $.alert(\'click cancel button\')
 }
})

为了调用方便，直接将css样式写在了js中，兼容性方面只测试了IE8和chrome以及safari，都还可以。
IE8没问题想必其他现代浏览器应该也是OK的。

(function ($) {
  $.extend({
    _isalert:0,
    alert:function(){
      if(arguments.length){
        $._isalert=1;
        $.confirm.apply($,arguments);
      }
    },
    confirm:function(){
      var args=arguments;
      if(args.length&&(typeof args[0] == \'string\')&&!$(\'#alert_overlay\').length){
        if(!$(\'#alert_style\').length) $(\'body\').append(\'<style id=\"alert_style\" type=\"text/css\">#alert_overlay{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999;background:#000;filter:alpha(opacity=5);opacity:.05}#alert_msg{position:fixed;width:400px;margin-left:-201px;left:50%;top:20%;z-index:1000;border:1px solid #aaa;box-shadow:0 2px 15px rgba(0,0,0,.3);background:#fff}#alert_content{padding:20px;font-size:14px;text-align:left}#alert_buttons{padding:10px;border-top:1px solid #aaa;text-align:right;box-shadow:0 1px 0 #fff inset;background:#eee;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}#alert_buttons .alert_btn{padding:5px 12px;margin:0 2px;border:1px solid #aaa;background:#eee;cursor:pointer;border-radius:2px;font-size:14px;outline:0;-webkit-appearance:none}#alert_buttons .alert_btn:hover{border-color:#bbb;box-shadow:0 1px 2px #aaa;background:#eaeaea}#alert_buttons .alert_btn:active{box-shadow:0 1px 2px #aaa inset;background:#e6e6e6}</style>\');
        var dialog=$(\'<div id=\"alert_overlay\"></div><div id=\"alert_msg\"><div id=\"alert_content\">\'+args[0]+\'</div><div id=\"alert_buttons\"><button class=\"alert_btn alert_btn_ok\">确定</button><button class=\"alert_btn alert_btn_cancel\">取消</button></div></div>\');
        if($._isalert) dialog.find(\'.alert_btn_cancel\').hide();
        dialog.on(\'contextmenu\',function(){
          return !1;
        }).on(\'click\',\'.alert_btn_ok\',function(){
          dialog.remove();
          if(typeof args[1]==\'function\') args[1].call($,!0);
        }).on(\'click\',\'.alert_btn_cancel\',function(){
          dialog.remove();
          if(typeof args[1]==\'function\') args[1].call($,!1);
        }).appendTo(\'body\');
      }
      $._isalert=0;
    }
  });
})($);

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/2142

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案