<button data-toggle="modal" data-target="#myModal" data-keyboard="false" class="sui-btn btn-primary btn-lg">对话框已写入html</button>
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">我是内容body</div>
      <div class="modal-footer">
        <button type="button" data-ok="modal" class="sui-btn btn-primary btn-large">可自定ok</button>
        <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">可自定dismiss</button>
      </div>
    </div>
  </div>
</div>
<script>
  $('#myModal').on('okHide', function(e){console.log('okHide')})
  $('#myModal').on('okHidden', function(e){console.log('okHidden')})
  $('#myModal').on('cancelHide', function(e){console.log('cancelHide')})
  $('#myModal').on('cancelHidden', function(e){console.log('cancelHidden')})
</script>

$ele.modal(opstions)  让指定的内容变成一个模态对话框。接受一个可选的参数

$ele.modal('show')  手动打开一个模态对话框。

$ele.modal('hide')  手动关闭一个模态对话框。

$ele.modal('okHide')  手动关闭一个模态对话框，此时不会再触发okHide事件回调，而是在对话框关闭后会触发okHidden事件。

$ele.modal('toggle')  手动打开或关闭一个模态对话框。

$ele.modal('shadeIn')  使该对话框自身被遮罩层遮住，方便层上层的调用操作。

$ele.modal('shadeOut')  顾名思义，上一条的逆操作。

$ele.modal('shadeToggle')  顾名思义，上两条的交替操作。

$ele.modal('resize') dialog展示后，如果高度动态发生变化，比如塞入异步数据后撑高容器，则调用该接口使dialog重新定位居中

简单使用方法

无需编写JavaScript代码即可生成一个对话框。在一个主控元素，例如按钮，上设置data-toggle="modal"，然后再设置data-target="#foo" 或href="#foo" 用以指向某个将要被启动的对话框。

属性都是必须的。也可通过$ele.modal(opt)触发,注意这里的$ele是对话框元素，不是触发元素（如某个按钮）

对异步操作的增强支持

对确定按钮[data-ok="modal"]动态添加class="disabled" 可以阻止按钮被点击，同时阻止okHide事件的执行

此HTML模板方法对话框针对层上层的处理

层上层通常是对 对话框操作的确认提示以及反馈，不会再有复杂业务逻辑,所以合理搭配是：
下层为复杂业务的原型方法对话框，上层为简单静态方法对话框。其他组合可能会有问题。
调用$ele.modal('shade')可以使自身被遮罩（不是全屏遮罩），然后可安心处理上层对话框弹出并让用户操作。

2种对话框的取舍。

涉及弹层html结构/的参数（如hasfoot，okbtn，cancelbtn）不适用此类调用方法，因为弹层html结构已经被写在html中，比如不要脚部，则.modal-footer及其子元素不写到html里即可

原型方法的事件接口,与bootstrap提供的一致,与静态方法不互用

$('#myModal').on('hidden', function () {
  // do something…
})

<button id="J_alert1" class="sui-btn btn-primary btn-lg">$.alert('xxx')</button>
<button id="J_confirm1" class="sui-btn btn-primary btn-lg">$.confirm('xxx')</button>
<script>
  $('#J_alert1').on('click', function(e){
    $.alert('alert it is | alert it is | alert it is | alert it is | alert it is | alert it is | alert it is | alert it is | alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | ')
  })
  $('#J_confirm1').on('click', function(e){
    $.confirm({
      body: 'cconfirmconfirmconfirmconfirmconfirmonfirm <br> 这里设置了height属性手动改变高度'
      ,height: 300
    })
  })
  
  
</script>

静态方法有alert和confirm

静态方法的构造原则

最大限度的还原系统自带alert，confirm的使用体验，快捷同时可通过扩展参数加强功能。

静态方法和原型方法使用的基本原则

静态方法适宜于较少重复/多处出现/勿需记忆状态的弹层，可方便的直接调用，最简单形式就是$.alert('亚哈了他了该')。

若弹层Dom结构复杂，本身可作为复杂业务组件，建议将弹层html结构写到html里，用$ele.modal(options) 调用。

静态方法不调用后不返回实例对象。

$.alert({
 backdrop: true   决定是否为模态对话框添加一个背景遮罩层。另外，该属性指定static时，表示添加遮罩层，同时点击模态对话框的外部区域不会将其关闭。
 bgcolor: '#123456'   背景遮罩层颜色，默认是黑色。可以用rgba设置透明度
 keyboard: true   是否可由esc按键关闭
 title: '自定义标题'
 body: 'html' //必填
 okBtn : '好的'
 cancelBtn : '雅达'
 closeBtn: true/false   是否显示右上角叉叉（html使用方式无需配置，直接改html结构即可）
 transition: true/false   是否以transition动画方式显示隐藏对话框（html使用方式调用对话框时，也可直接删除.sui-modal元素上的类名fade即可）
 hasfoot: {Boolean}  是否显示脚部  默认true
 width: {number|string(px)|'small'|'normal'|'large'}推荐优先使用后三个描述性字符串，统一样式
 height: {number|string(px)} 内容区（.modal-body）高度
 remote: {string} 如果提供了远程url地址，就会加载远端内容
 timeout: {number} 1000    单位毫秒ms ,对话框打开后多久自动关闭
 show:     fn --------------function(e){}
 shown:    fn
 hide:     fn
 hidden:   fn
 okHide:   function(e){alert('点击确认后、对话框消失前的逻辑,
           函数返回true（默认）则对话框关闭，反之不关闭;若不传入则默认是直接返回true的函数
           注意不要人肉返回undefined！！')}
 okHidden: function(e){alert('点击确认后、对话框消失后的逻辑')}
 cancelHide: fn  取消关闭前
 cancelHidden: fn  取消关闭后
 
})

<button id="J_lizi1" class="sui-btn btn-primary btn-lg">各种状态检测（打开F12）</button>
<script>
  $('#J_lizi1').on('click', function(e){
    $.confirm({
      body: 'confirm again'
      ,width: 'normal'
      ,backdrop: true
      ,bgcolor: 'none'
      ,show: function(){console.log('show')}
      ,shown: function(){console.log('shown')}
      ,hide: function(){console.log('hide')}
      ,hidden: function(){console.log('hiden')}
      ,okHide: function(){var a=confirm('true or false');if(!a) return false}
      ,okHidden: function(){console.log('okHidden')}
      ,cancelHide: function(){console.log('cancelHide')}
      ,cancelHidden: function(){console.log('cancelHidden')}
    })
  })
</script>
<button id="J_remote" data-toggle="modal" data-remote="../package.json" data-target="#J_remotemodal" class="sui-btn btn-primary">加载远端内容</button>
<div id="J_remotemodal" tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
        <h4 class="modal-title">remote Modal title</h4>
      </div>
      <div class="modal-body">我是内容body</div>
    </div>
  </div>
</div>

<button id="J_addsuppliers" data-toggle="modal" data-target="#J_addsuppliersDialog" data-width="large" data-backdrop="static" class="sui-btn btn-primary">添加供应商</button><div id="J_addsuppliersDialog" tabindex="-1" role="dialog" class="sui-modal hide fade" data-addsupplierurl="http://" data-getsuppliersurl="http://xxx">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
              <h4 id="myModalLabel" class="modal-title">供应商收编</h4>
          </div>
          <div class="modal-body sui-form form-horizontal">
              <div class="sui-msg msg-block msg-default msg-tips">
<div class="msg-con">以下为供销平台上已经获得小二授权经营您的品牌但还未被您进行收编的供应商</div>
<s class="msg-icon"></s>
              </div>
              <table class="sui-table table-bordered-simple">
<thead>
    <tr>
        <th>供应商昵称</th>
        <th>公司名称</th>
        <th>供应商类型</th>
        <th>分销商数量</th>
        <th>授权品牌</th>
        <th>操作</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><span>only淘宝商城官方旗舰店</span></td>
        <td><span>九牧官方旗舰店</span></td>
        <td><span>企业</span></td>
        <td><span class="distributor-num">432</span></td>
        <td>
            <ul class="authorize-brand">
                <li>海尔</li>
                <li>统帅</li>
            </ul>
        </td>
        <td data-supplierid="111">
            <button class="sui-btn btn-small J_addOneSupplier">添加</button>
        </td>
    </tr>
</tbody>
              </table>
          </div>
      </div>
  </div>
</div>
<script>
  $supDialog = $('#J_addsuppliersDialog')
  $supDialog.on('click', '.J_addOneSupplier', function(e) {
    $supDialog.modal('shadeIn');
    return $.confirm({
      title: '确认',
      body: '您确认添加该供应商吗？',
      backdrop: false,
      okHide: function() {
        $.alert({
          hasfoot: false,
          backdrop: false,
          title: '不管发生了什么，总之成功了',
          body: 'msg-large msg-block msg-',
          timeout: 1000
        });
      },
      hide: function() {
        return $supDialog.modal('shadeOut');
      }
    });
  });
  
  
</script>

有几点注意，使用层上层时

底层：一定是复杂对话框，一定是使用的原型方法，即HTML写在模板中的对话框。要设置backdrop:static,已防止上层显示时不小心点击背景使底层消失了。。。

上层：只要不是底层，都设置backdrop:false,避免多背景。同时上层show时可以调用底层方法 $supDialog.modal('shadeIn')使底层被遮罩，防止又对底层做了其他操作。上层关闭后调用$supDialog.modal('shadeOut')复原。