基于Jquery的提示框与选择框组件组件

1.首先根据需求编写自己的静态组件，并调好样式。

2.定义好之后先将样式通过JS加入到页面中。

$('head').append(
    "<style type='text/css'>~~~自己写的样式~~~</style>"
  );

3.在调取弹框时创建弹框节点，添加到页面中

function myAlert() {
      var args = arguments;
      if (
        args.length &&
        typeof args[0] == 'string' &&
        !$('#alert_msg').length
      ) {
        var dialog = $(
          '<div class="wrap_overlay_drak"><div class="wrap_overlay" id="alert_msg"><div class="content_overlay">' +
          args[0] +
          '</div><div id="alert_buttons"><button class="alert_btn alert_btn_ok">确定</button></div></div></div>'
        );
        dialog
          .on('click', '.alert_btn_ok', function () {
              dialog.remove(); //点击确定后隐藏
            if (typeof args[1] == 'function') args[1].call($);//确认后的回调函数
          })
          .appendTo('body');
      }
    }

4.选择框与提示框逻辑类似。

function myConfirm() {
      var args = arguments;
      if (
        args.length &&
        typeof args[0] == 'string' &&
        !$('#confirm_msg').length
      ) {
        var dialog = $(
          '<div class="wrap_overlay_drak"><div class="wrap_overlay" id="confirm_msg"><div class="content_overlay">' +
          args[0] +
          '</div><div id="confirm_buttons"><button class="alert_btn alert_btn_ok">确定</button><button class="alert_btn alert_btn_cancel">取消</button></div></div></div>'
        );
        dialog
          .on('click', '#confirm_buttons .alert_btn_ok', function () {//确认后逻辑
              dialog.remove();
              if (typeof args[1] == 'function') args[1].call($, !0);//传回参数true，以此判断点击确认还是取消
          })
          .on('click', '#confirm_buttons .alert_btn_cancel', function () {//取消后逻辑
              dialog.remove();
              if (typeof args[1] == 'function') args[1].call($, !1);//传回参数false，以此判断点击确认还是取消
          })
          .appendTo('body');
      }
    }

5.为了方便可以添加到jQuery方法中。

$.extend({
   myAlert,
   myConfirm  
})

6.贴上完整代码，使用时先引入jQuery。

(function ($) {
  if (!$) {
    throw new Error('jQuery is undefined!');
  }
  $('head').append(
    "<style type='text/css'>.wrap_overlay_drak{position:fixed;top:0;bottom:0;left:0;right:0;background-color:transparent;z-index:999999;font-size:14px}.wrap_overlay_drak .wrap_overlay{position:fixed;width:400px;margin-left:-201px;transform:translate(0,-180px) rotateX(60deg);left:50%;top:50%;opacity:.3;box-shadow:0 2px 10px rgba(99,99,99,.3);background:#fff;transition:all .15s linear}.wrap_overlay_drak .wrap_overlay.wrap_overlay_show{transform:translate(0,-150px) rotateX(0);opacity:1}.wrap_overlay_drak .wrap_overlay #confirm_msg{z-index:9998}.wrap_overlay_drak .wrap_overlay .content_overlay{padding:20px;font-size:14px;text-align:left}.wrap_overlay_drak .wrap_overlay #alert_buttons,.wrap_overlay_drak .wrap_overlay #confirm_buttons{padding:10px;text-align:right;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.wrap_overlay_drak .wrap_overlay .alert_btn{padding:5px 15px;margin:0 5px;background:#409eff;cursor:pointer;color:#fff;border:none;border-radius:5px;font-size:14px;outline:0;-webkit-appearance:none}.wrap_overlay_drak .wrap_overlay .alert_btn_cancel{background:0 0;color:#409eff;border:1px solid #ddd}.wrap_overlay_drak .wrap_overlay #alert_buttons .alert_btn:hover,.wrap_overlay_drak .wrap_overlay #confirm_buttons .alert_btn:hover{opacity:.7}</style>"
  );
  $.extend({
    alert: function () {
      var args = arguments;
      if (
        args.length &&
        typeof args[0] == 'string' &&
        !$('#alert_msg').length
      ) {
        var dialog = $(
          '<div class="wrap_overlay_drak"><div class="wrap_overlay" id="alert_msg"><div class="content_overlay">' +
          args[0] +
          '</div><div id="alert_buttons"><button class="alert_btn alert_btn_ok">确定</button></div></div></div>'
        );
        dialog
          .on('click', '.alert_btn_ok', function () {
            $('.wrap_overlay').removeClass('wrap_overlay_show');
            setTimeout(function () {
              dialog.remove();
            }, 150);
            if (typeof args[1] == 'function') args[1].call($, !0);
          })
          .appendTo('body');
        setTimeout(function () {
          $('.wrap_overlay').addClass('wrap_overlay_show');
        }, 1); //添加延时
      }
    },
    confirm: function () {
      var args = arguments;
      if (
        args.length &&
        typeof args[0] == 'string' &&
        !$('#confirm_msg').length
      ) {
        var dialog = $(
          '<div class="wrap_overlay_drak"><div class="wrap_overlay" id="confirm_msg"><div class="content_overlay">' +
          args[0] +
          '</div><div id="confirm_buttons"><button class="alert_btn alert_btn_ok">确定</button><button class="alert_btn alert_btn_cancel">取消</button></div></div></div>'
        );
        dialog
          .on('click', '#confirm_buttons .alert_btn_ok', function () {
            $('.wrap_overlay').removeClass('wrap_overlay_show');
            setTimeout(function () {
              dialog.remove();
              if (typeof args[1] == 'function') args[1].call($, !0);
            }, 150);
          })
          .on('click', '#confirm_buttons .alert_btn_cancel', function () {
            $('.wrap_overlay').removeClass('wrap_overlay_show');
            setTimeout(function () {
              dialog.remove();
              if (typeof args[1] == 'function') args[1].call($, !1);
            }, 150);
          })
          .appendTo('body');
        setTimeout(function () {
          $('.wrap_overlay').addClass('wrap_overlay_show');
        }, 1);//添加延时

} }, }); })(jQuery);

值得注意的是在apped到页面时改变class，transition过渡动画是无效的，因为浏览器的优化计算造成css属性没有发生变化，造成动画无效，所以这里加了延时。也可以强制reflow一下（获取一下元素的css属性）。

7.调用

$.alert('成功', function () {
        //...确认后的逻辑
      });

$.confirm('是否确认？', function (isConfirm) {
        if (isConfirm) {
          $.alert('确认'); //确认逻辑
        } else {
          $.alert('取消');//取消逻辑
        }
      });