什么是模态窗口

简单来说就是在页面点击一个按钮,然后弹出来一个小窗口

模态窗口：

模拟的窗口,本质上是<div>，通过设置z-index(轴,x轴,y轴)大小来实现的;

​ 初始时，z-index初始参数是<0，所以不显示；
​ 需要显示时，z-index值设置成>0即可。

**谁来控制模态窗口的显示的呢?**bootstrap技术

bootstrap来控制z-index的大小。

可以看到jsp页面是引入了bootstrap技术的.

如何区分或者设置某个div是模态窗口呢?

通过下方截图中的代码来标识.当我们标识了以后bootstrap框架就会起作用.

控制模态窗口的显示与隐藏：

1)方式一：通过标签的属性data-toggle="modal" data-target="模态窗口的id"

案例:

点击创建按钮后显示:

代码实现:创建按钮data-toggle="modal" data-target="#createActivityModal" 主要是这两个属性

<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createActivityModal"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>

``data-toggle="modal"这个属性就像是一个开关,data-target属性就是目标,就是我要控制谁,当我们点击创建按钮的时候,就会触发对应id`相同的名字.

2)方式二：通过js函数控制：

​ 选择器(选中div).modal("show");//显示选中的模态窗口
​ 选择器(选中div).modal("hide");//关闭选中的模态窗口

3)方式三：通过标签的属性data-dismiss=""

​ 点击添加了data-dismiss=""属性的标签，自动关闭该标签所在的模态窗口。

<div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>

`