根据公司的需求，需要一个对话框来返回给客户的失败原因，刚刚开在百度上搜了老半天，嫩是没有搜索一个自己想要的，后来发送私信给一个博友，经过他哪里找到了自己想要的答案，废话不多说直接看源码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bootstrap 实例 - 模态框（Modal）插件</title> 5 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 6 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 7 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 8 </head> 9 <body> 10 11 <h2>创建模态框（Modal）</h2> 12 <!-- 按钮触发模态框 --> 13 <button class="btn btn-primary btn-lg" data-toggle="modal" 14 data-target="#myModal"> 15 开始演示模态框 16 </button> 17 18 <!-- 模态框（Modal） --> 19 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 20 aria-labelledby="myModalLabel" aria-hidden="true"> 21 <div class="modal-dialog"> 22 <div class="modal-content"> 23 <div class="modal-header"> 24 <button type="button" class="close" 25 data-dismiss="modal" aria-hidden="true"> 26 × 27 </button> 28 <h4 class="modal-title" id="myModalLabel"> 29 模态框（Modal）标题 30 </h4> 31 </div> 32 <div class="modal-body"> 33 <input type="text"/> 34 在这里添加一些文本 35 </div> 36 <div class="modal-footer"> 37 <button type="button" class="btn btn-default" 38 data-dismiss="modal">关闭 39 </button> 40 <button type="button" class="btn btn-primary"> 41 提交更改 42 </button> 43 </div> 44 </div><!-- /.modal-content --> 45 </div><!-- /.modal --> 46 </div> 47 </body> 48 </html>
或者http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html进这个网站
或者直接百度搜索:bootstrap的modal框