• 以弹出对话框的形式出现，当模态窗口出现时，<body> 将添加类 .modal-open 这个类。
  • 不支持同时打开多个模态框，千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。
  • 务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 <body> 的直接子元素），以避免其他组件影响模态框的展现和或功能。
  • 务必为 .modal-background 添加 role="dialog" 和 aria-labelledby="..." 属性，用于指向模态框的标题栏。
  • 典型的模态窗结构并不包括按钮区域的规范定制，你可根据实际需要配合按钮组件和排版工具进行组合。
实例
            
<div class="modal-background">
  <div class="modal-layer">
    <div class="modal-position">
      <div class="modal-wrap animated bounceInDown">
        <div class="modal-head">
          模态窗口标题
          <i class="modal-close"></i>
        </div>
        <div class="modal-body">
          模态窗口主体高度不限
        </div>
      </div>
    </div>
  </div>
</div>
  • BrickPlus 提供了四种不同的模态窗尺寸，以备适应不同的设计需求，其中三种非常规尺寸需通过给 .modal-background 叠加类 .large-modal / .small-modal / .smaller-modal 展示。
实例
            
<div class="modal-background ( large-modal / small-modal / smaller-modal )">
  ...
</div>