模态窗口功能实现的两种方式

参考来源:https://blog.csdn.net/weixin_54401017/article/details/124948755

方式一：以前使用的方式，缺点很明显

window.open("url","_blank");这个打开的是另外一个页面了，不利于与原来那个页面进行数据交互。

方式二：

模态窗口：模拟的窗口，本质上是

,通过设置z-index大小来实现的。初始时，z-index初始参数是<0;所以不显示，需要显示时，z-index的值设置为>0.

可以使用bootstrap来控制z-index的大小：（实现讲解）

1.首先引入bootstrap所需要的jar包

<link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />



<script type="text/javascript" src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

2.像下面一样给div标签加上class="modal fade"和id

<div class="modal fade" id="createActivityModal" role="dialog">

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

方式一：通过标签的属性data-toggle="modal" + data-target="模态窗口id" 的方式控制模态窗口显示

 <button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>

隐藏：通过标签属性data-dismiss="modal",点击添加了data-dismiss="modal"属性的标签，自动关闭该标签所在的模态窗口

<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>

方式二：通过js函数控制：这种方式可以在显示模态窗口之前进行一些初始化操作

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

选择器（选中div).modal("hide");//隐藏选中的模态窗口

最后：模态窗口的本质就是原来页面的一个

,只有一个页面，