自定义子窗体
最近在做一个简单web项目，需要在一个页面上弹出一个窗口，展示信息进行交互操作。使用了Bootstrap模态框插件。主要的思路还是 div+css 实现遮罩+弹出框（在页面中间）。
一、简单说明
1、css：z-index的值越大， 被层叠在最上面。
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0
}
2、模态框属性
data-dismiss="modal" ： 是自定义的 HTML5 data 属性，被用于关闭模态窗口，如果不需要点击按钮就关闭弹框，就不要加这个属性。
this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this))
手动打开模态框：modal('show')
手动关闭模态框：modal('hide')
二、例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<h2>弹框实例</h2>
<button class="btn btn-primary btn-lg" onclick="showConfirmDialog()">按钮</button>
</div>
<div id="confirmDialog" class="modal fade" role="dialog">
<div class="modal-dialog" role="document" style="width: 700px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modaltitle">title</h4>
</div>
<form>
<div class="modal-body" style="max-height: 600px; overflow-y: auto">
<label>Content</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="confirmoperate()" data-dismiss="modal" style="width: auto">确认</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</form>
</div>
</div>
</div>
<script>
function showConfirmDialog() {
var modal = $('#confirmDialog');
$(modal).modal('show');
}
</script>
</body>
</html>
展示结果：
在弹出框中，就可以写自己需要的内容。