SemanticUI多级弹出层

制作一款网页，你需要用到三个工具，html，CSS 和javascript。如果用人的身体来和网页做类比的话，html负责搭建基础，就像人类的骨架。CSS负责布局和美化，就像人类的肌肉和皮肤，一个网页做的漂亮与否就是由它决定的。而javascript就像是人的神经系统，负责接收信息和做出反馈。当我们点网页上某个按钮能实现特定的功能，就是javascript在起作用。semantic UI 是一款很好用的CSS工具，事实上，你可以认为它是一款不错的化妆品，因为它比普通的CSS制作的界面更好看一些，也更容易。semantic UI集成了很多很漂亮的UI模块，能够使网页制作更加高效和美观。

最近在使用SemanticUI过程中要实现多级弹出层功能，官方文档上其实也有写多级弹出层的使用方法，但有些难懂，在网上搜索查到的资料比较少，所以在这里记录一下开发过程中的获得的一点经验。

官方文档中弹出层-示例-多模态部分讲到了多级弹出层的使用方法，调用方法如下：

// initialize all modals
$('.coupled.modal')
  .modal({
    allowMultiple: true
  })
;
// open second modal on first modal buttons
$('.second.modal')
  .modal('attach events', '.first.modal .button')
;
// show first immediately
$('.first.modal')
  .modal('show')
;

其实主要使用到allowMultiple属性，在modal设置show方法之前设置属性allowMultiple为true，代表页面可同时显示多个弹出层，并层叠显示。属性默认为false，也就是默认下一个弹出层显示时前一个弹出层会消失。

按照官方文档，我们可以按照下面这种方式使用：

<div class="ui first coupled modal">
    <h1>这是第一个弹窗</h1>
    <button type="button" class="ui blue button">打开二级弹窗</button>
</div>

<div class="ui second coupled modal">
    <h1>这是第二个弹窗</h1>
</div>

官方写法比较固定，其实主要使用到allowMultiple属性，实际开发过程中点击一级弹出层按钮时会有网络交互过程，二级弹出层一般会在网络交互完成后再控制弹出，所以也可像下面这么写：

先弹出一级弹出层

$('.first.modal')
    .modal({
        allowMultiple: true
    })
    .modal('show')
;

在需要的位置弹出二级弹出层

$('.first.modal')
    .modal({
        allowMultiple: true
    })
    .modal('show')
;

按照这种方式可实现多级弹出层的弹出效果，一切以实际开发过程中遇到的需求为主。