根據公司的需求，需要一個對話框來返回給客戶的失敗原因，剛剛開在百度上搜了老半天，嫩是沒有搜索一個自己想要的，后來發送私信給一個博友，經過他哪里找到了自己想要的答案，廢話不多說直接看源碼：
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框