<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>模态框</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">新增物料</h4>
</div>
<div class="modal-body">
内容填充
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
<div>
<a data-target="#myModal" data-toggle="modal"> /*data-target="#myModal" data-toggle="modal" 显示遮罩层*/
新增物料
</a>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
原文：http://www.cnblogs.com/hongxp/p/5861918.html