dialog插件

dialog.html

<script type="text/template" id="dialog">
    <div class="<%=className%>">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <% if(title){ %>
            <div class="weui-dialog__hd"><strong class="weui-dialog__title"><%=title%></strong></div>
            <% } %>
            <div class="weui-dialog__bd"><%=content%></div>
            <div class="weui-dialog__ft">
                <% for(var i = 0; i < buttons.length; i++){ %>
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_<%=buttons[i]['type']%>"><%=buttons[i]['label']%></a>
                <% } %>
            </div>
        </div>
    </div>
</script>

dialog.less

@weuiDialogLineColor: #DCDCDC;
.setTopLine(@c: #DCDCDC) {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid @c;
  color: @c;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}

.setTapColor(@c:rgba(0,0,0,0)) {
  -webkit-tap-highlight-color: @c;
}

.setLeftLine(@c: #DCDCDC) {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid @c;
  color: @c;
  transform-origin: 0 0;
  transform: scaleX(0.5);
}
.ui-dialog {
    position: fixed;
    z-index: 5000;
    width: 72%;
    max-width: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: #FFFFFF;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
}
.ui-dialog__title {
  font-weight: 400;
  font-size: 15px;
  padding-top: 21px;
  padding-bottom: 21px;
}
.ui-dialog__bd {
    padding-top: 21px;
    padding-bottom: 21px;
    font-size: 13px;
    word-wrap: break-word;
    word-break: break-all;
    color: black;
}
.ui-dialog__title~.ui-dialog__bd{
  padding-top: 0;
}
.ui-dialog__ft {
    position: relative;
    font-size: 15px;
    display: flex;
    &:after {
       content: " ";
      .setTopLine(@weuiDialogLineColor);
    }
}
.ui-dialog__btn {
  display: block;
  padding-top: 15px;
  padding-bottom: 15px;
  flex: 1;
  color: #FF8F3B;
  text-decoration: none;
  .setTapColor();
  &:active {
     background-color: #EEEEEE;
  }
  position: relative;
  &:after {
    content: " ";
    .setLeftLine(@weuiDialogLineColor);
  }
  &:first-child {
    &:after {
       display: none;
    }
  }
}
.ui-dialog__btn_default {
    color: #FF8F3B;
}
.ui-dialog__btn_primary {
    color: #FF8F3B;
}

.ui-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .6);
}
.ui-mask_transparent{
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

@-webkit-keyframes fadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}
@keyframes fadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}
.ui-animate-fade-in{
  -webkit-animation:fadeIn ease .3s forwards;
  animation:fadeIn ease .3s forwards;
}
@-webkit-keyframes fadeOut{
  from{
    opacity:1;
  }
  to{
    opacity:0;
  }
}
@keyframes fadeOut{
  from{
    opacity:1;
  }
  to{
    opacity:0;
  }
}
.ui-animate-fade-out{
  -webkit-animation:fadeOut ease .3s forwards;
  animation:fadeOut ease .3s forwards;
}

@media screen and (min-width: 1024px) {
    .ui-dialog {
        width: 35%;
    }
}

dialog.js

/**
 * dialog，弹窗，alert和confirm的父类
 *
 * @param {object=} options 配置项
 * @param {string=} options.title 弹窗的标题
 * @param {string=} options.content 弹窗的内容
 * @param {string=} options.className 弹窗的自定义类名
 * @param {array=} options.buttons 按钮配置项
 *
 * @param {string} [options.buttons[].label=确定] 按钮的文字
 * @param {string} [options.buttons[].type=primary] 按钮的类型 [primary, default]
 * @param {function} [options.buttons[].onClick=$.noop] 按钮的回调
 *
 * @example
 * Dialog({
 *     title: 'dialog标题',
 *     content: 'dialog内容',
 *     className: 'custom-classname',
 *     buttons: [{
 *         label: '取消',
 *         type: 'default',
 *         onClick: function () { alert('取消') }
 *     }, {
 *         label: '确定',
 *         type: 'primary',
 *         onClick: function () { alert('确定') }
 *     }]
 * });
 *
 * // 主动关闭
 * var $dialog = Dialog({...});
 * $dialog.hide(function(){
 *      console.log('`dialog` has been hidden');
 * });
 */
(function(global,factory){
    if(typeof define === 'function' && define.amd){
        define(function(){
            return factory();
        });
    }else if(typeof module !== 'undefined' && module.exports){
        module.exports = factory();
    }else{
        global.Dialog = factory(global);
    }
}(typeof window !== 'undefined' ? window : this,function(win){
    var _sington;
    var dialog = function(options){
        var style = '.ui-dialog{position:fixed;z-index:5000;width:72%;max-width:300px;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#FFFFFF;text-align:center;border-radius:3px;overflow:hidden;}.ui-dialog__title{font-weight:400;font-size:15px;padding-top:21px;padding-bottom:21px;}.ui-dialog__bd{padding-top:21px;padding-bottom:21px;font-size:13px;word-wrap:break-word;word-break:break-all;color:black;}.ui-dialog__title ~ .ui-dialog__bd{padding-top:0;}.ui-dialog__ft{position:relative;font-size:15px;display:flex;}.ui-dialog__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid #DCDCDC;color:#DCDCDC;transform-origin:0 0;transform:scaleY(0.5);}.ui-dialog__btn{display:block;padding-top:15px;padding-bottom:15px;flex:1;color:#FF8F3B;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}.ui-dialog__btn:active{background-color:#EEEEEE;}.ui-dialog__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1px solid #DCDCDC;color:#DCDCDC;transform-origin:0 0;transform:scaleX(0.5);}.ui-dialog__btn:first-child:after{display:none;}.ui-dialog__btn_default{color:#FF8F3B;}.ui-dialog__btn_primary{color:#FF8F3B;}.ui-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.6);}.ui-mask_transparent{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;}@-webkit-keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.ui-animate-fade-in{-webkit-animation:fadeIn ease .3s forwards;animation:fadeIn ease .3s forwards;}@-webkit-keyframes fadeOut{from{opacity:1;}to{opacity:0;}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}.ui-animate-fade-out{-webkit-animation:fadeOut ease .3s forwards;animation:fadeOut ease .3s forwards;}@media screen and (min-width:1024px){.ui-dialog{width:35%;}}';
        $('head').append('<style type="text/css">'+style+'</style>');

        if(_sington) return _sington;

        options = $.extend({},{
            title: '',
            content: null,
            className: '',
            buttons: [{
                label: '确定',
                type: 'primary',
                onClick: function(){}
            }]
        }, options);

        var contentHtml = "";
            buttonsHtml = "";
        if(options.content){
            contentHtml = '<div class="ui-dialog__bd">'+options.content+'</div>';
        }
        for(var i = 0; i < options.buttons.length; i++){
            buttonsHtml += '<a href="javascript:;" class="ui-dialog__btn ui-dialog__btn_'+options.buttons[i]['type']+'">'+options.buttons[i]['label']+'</a>';
        }
        const dialogWrap = '<div class="'+options.className+'">'+
        '    <div class="ui-mask"></div>'+
        '    <div class="ui-dialog">'+
        '       <div class="ui-dialog__title">'+options.title+'</div>'+
            contentHtml+
        '       <div class="ui-dialog__ft">'+
                buttonsHtml+
        '       </div>'+
        '    </div>'+
        '</div>';
        const $dialogWrap = $(dialogWrap);
        const $dialog = $dialogWrap.find('.ui-dialog');
        const $mask = $dialogWrap.find('.ui-mask');

        function _hide(callback){
            _hide = function(){}; // 防止二次调用导致报错

            $mask.addClass('ui-animate-fade-out');
            $dialog
                .addClass('ui-animate-fade-out')
                .on('animationend webkitAnimationEnd', function () {
                    $dialogWrap.remove();
                    _sington = false;
                    callback && callback();
                });
        }
        function hide(callback){ _hide(callback); }

        $('body').append($dialogWrap);
        // 不能直接把.ui-animate-fade-in加到$dialog，会导致mask的z-index有问题
        $mask.addClass('ui-animate-fade-in');
        $dialog.addClass('ui-animate-fade-in');

        $dialogWrap.on('click', '.ui-dialog__btn', function (evt) {
            const index = getIndex.call($(this));
            if (options.buttons[index].onClick) {
                if (options.buttons[index].onClick.call(this, evt) !== false) hide();
            } else {
                hide();
            }
        });

        _sington = $dialogWrap[0];
        _sington.hide = hide;
        return _sington;
        function getIndex() {
            const $element = this[0];
            const $parent = $element.parentNode;
            return Array.prototype.indexOf.call($parent.children, $element);
        }
    };
    return dialog;
}));