模态窗口
所谓模态窗口就是在一个页面上点击的时候会出现一个小窗口，你可以在这个小窗口中完成某一个功能。例如你想添加用户，在页面上点击添加按钮后不会跳到一个新的页面而是弹出一个添加的小框，在里面完成你的操作。
模态窗口:模拟的窗口。
以前实现这功能可以使用 window.open(“url”,_blank); 表示新开一个窗口打开这个url
但是这种方式有缺陷
现在的模态窗口本质上是< div >通过设置Z-index大小来实现的
默认情况下z轴初始参数是<0 所以不显示 ，需要显示时，z轴设置成>0即可
想使用的话先导入bootstrap框架 然后给div的class属性赋值为 modal fade
为 .modal 添加 role=“dialog”，用于指定模态框为对话框。
为 .modal-dialog 添加 aria-hidden=“true” 属性。
通过 aria-describedby 属性为模态框 .modal 添加描述性信息。
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
1234
模态窗口的显示与隐藏
1）方式一 ： 通过 data-toggle属性 若使用了这个属性以前模态窗口隐藏点击则显示 ，若以前是显示点击则隐藏
data-target 属性表示控制哪个模态窗口 其值是模态窗口的id
<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>
1234
<div class="modal fade" id="createActivityModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 85%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="create-marketActivityOwner">
<option>zhangsan</option>
<option>lisi</option>
<option>wangwu</option>
</select>
</div>
<label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-marketActivityName">
</div>
</div>
<div class="form-group">
<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-startTime">
</div>
<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-endTime">
</div>
</div>
<div class="form-group">
<label for="create-cost" class="col-sm-2 control-label">成本</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-cost">
</div>
</div>
<div class="form-group">
<label for="create-describe" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="create-describe"></textarea>
</div>
</div>
</form>
</div>
<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>
</div>
</div>
</div>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
这种方式有个不好的地方在于不能随时随地根据条件来显示模态窗口 也就是说这种方式你必须点击了某个事件才会产生，但是有时我们需要在代码执行过程中根据不同的运行结果来显示不同的模态窗口
方式二 ：通过js函数控制
选择器（选择div).modal(“show”);//显示选中的模态窗口
选择器（选择div).modal(“hide”);//显示选中的模态窗口
