<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>