## Modal模拟态
1. Toast
<br>![](http://res.winbaoxian.com/autoUpload/common/toast1_4c99506e98ff924.png)
<br>![](http://res.winbaoxian.com/autoUpload/common/toast2_5c487b12f6cdabb.png)
<br>![](http://res.winbaoxian.com/autoUpload/common/toast3_a00637cdd9f65c9.png)
<br>![](http://res.winbaoxian.com/autoUpload/common/toast4_2a80974b9d8c9ca.png)
```html
<div class="bx-toast">轻提示</div>
<div class="bx-toast bx-toast--success"><i class="bx-icon"></i>成功提示</div>
<div class="bx-toast bx-toast--error"><i class="bx-icon"></i>失败提示</div>
<div class="bx-toast bx-toast--warn"><i class="bx-icon"></i>警示提示</div>
```
2. 通用Modal
<br>![](http://res.winbaoxian.com/autoUpload/common/modal_79957c07720aad8.png)
```html
<div class="bx-modal-panel">
  <div class="bx-modal-overlay"></div>
  <div class="bx-modal">
    <div class="bx-modal-header">
      <div class="bx-modal-close"><i class="bx-icon"></i></div>
      <div class="bx-modal-title">温馨提示</div>
    </div>
    <div class="bx-modal-body">
      <div class="bx-modal-inner">
        <div class="bx-modal-title">标题</div>
        <div class="bx-modal-content">补充说明正文</div>
      </div>
    </div>
    <div class="bx-modal-footer">
      <div class="bx-modal-buttons">
        <a class="bx-modal-btn">取消</a>
        <a class="bx-modal-btn bx-modal-link">确定</a>
      </div>
    </div>
  </div>
</div>
```
3. Alert
<br>![](http://res.winbaoxian.com/autoUpload/common/alert1_7ca5f1e3be400c8.png)
<br>![](http://res.winbaoxian.com/autoUpload/common/alert2_4bed6cac9b48ed2.png)
```html
<!--带标题Alert-->
<div class="bx-alert">
  <div class="bx-modal-overlay"></div>
  <div class="bx-modal">
    <div class="bx-modal-header">
      <div class="bx-modal-title">标题</div>
    </div>
    <div class="bx-modal-body">
      <div class="bx-modal-inner">
        <div class="bx-modal-content">带标题Alert</div>
      </div>
    </div>
    <div class="bx-modal-footer">
      <div class="bx-modal-buttons"><a class="bx-modal-btn bx-modal-link">知道了</a></div>
    </div>
  </div>
</div>
<!--普通Alert-->
<div class="bx-alert">
  <div class="bx-modal-overlay"></div>
  <div class="bx-modal">
    <div class="bx-modal-body">
      <div class="bx-modal-inner">
        <div class="bx-modal-content">普通Alert</div>
      </div>
    </div>
    <div class="bx-modal-footer">
      <div class="bx-modal-buttons"><a class="bx-modal-btn bx-modal-link">知道了</a></div>
    </div>
  </div>
</div>
```
4. Dialog
<br>![](http://res.winbaoxian.com/autoUpload/common/dialog1_605340c03d2f1f6.png)
<br>![](http://res.winbaoxian.com/autoUpload/common/dialog2_779f197fdcf06d0.png)
```html
<!--带标题Dialog-->
<div class="bx-dialog">
  <div class="bx-modal-overlay"></div>
  <div class="bx-modal">
    <div class="bx-modal-header">
      <div class="bx-modal-title">标题</div>
    </div>
    <div class="bx-modal-body">
      <div class="bx-modal-inner">
        <div class="bx-modal-content">带标题Dialog</div>
      </div>
    </div>
    <div class="bx-modal-footer">
      <div class="bx-modal-buttons"><a class="bx-modal-btn">取消</a> <a class="bx-modal-btn bx-modal-link">确定</a>
      </div>
    </div>
  </div>
</div>
<!--普通Dialog-->
<div class="bx-dialog">
  <div class="bx-modal-overlay"></div>
  <div class="bx-modal">
    <div class="bx-modal-body">
      <div class="bx-modal-inner">
        <div class="bx-modal-content">普通Dialog</div>
      </div>
    </div>
    <div class="bx-modal-footer">
      <div class="bx-modal-buttons"><a class="bx-modal-btn">取消</a> <a class="bx-modal-btn bx-modal-link">确定</a>
      </div>
    </div>
  </div>
</div>
```
5. Picker
<br>![](http://res.winbaoxian.com/autoUpload/common/picker_1d24beec012ffc1.png)
```html
<div class="bx-picker-panel">
  <div class="bx-picker-overlay"></div>
  <div class="bx-picker">
    <div class="bx-picker-header"><a class="bx-picker-action bx-picker-close">关闭</a> <a
      class="bx-picker-action bx-picker-confirm">确定</a></div>
    <div class="bx-picker-body">
      <div class="bx-picker-group">
        <div class="bx-picker-group-mask"></div>
        <div class="bx-picker-indicator"></div>
        <div class="bx-picker-content">
          <div class="bx-picker-item">浙江省</div>
          <div class="bx-picker-item">福建省</div>
          <div class="bx-picker-item">江苏省</div>
          <div class="bx-picker-item">广东省</div>
          <div class="bx-picker-item">山东省</div>
          <div class="bx-picker-item">安徽省</div>
          <div class="bx-picker-item">陕西省</div>
          <div class="bx-picker-item">河南省</div>
          <div class="bx-picker-item">河北省</div>
        </div>
      </div>
      <div class="bx-picker-group">
        <div class="bx-picker-group-mask"></div>
        <div class="bx-picker-indicator"></div>
        <div class="bx-picker-content">
          <div class="bx-picker-item">杭州市</div>
          <div class="bx-picker-item">绍兴市</div>
          <div class="bx-picker-item">温州市</div>
          <div class="bx-picker-item">宁波市</div>
          <div class="bx-picker-item">丽水市</div>
          <div class="bx-picker-item">温岭市</div>
          <div class="bx-picker-item">嘉兴市</div>
        </div>
      </div>
    </div>
  </div>
</div>
```