如何使用模態框

Bootstrap Modals(模態框)是使用定製的Jquery插件建立的，用來建立模態窗口豐富用戶體驗。頁面中的模態框通常分爲註冊模態框、變動模態框、刪除（信息提示）模態框三種基本模態框。以註冊模態框爲例子，詳細介紹。

注意：建立模態框須要Jquery、Bootstrap CSS和JavaScript等文件

<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>

<script src="js/jquery-accordion-menu.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css"/>

1.建立 註冊按鈕 點擊 註冊按鈕 註冊模態框出現

<button class="btn btn-primary btn-lg data-toggle="modal" data-target="#addAttribute">新增註冊</button>

           注：黃色背景色爲打開模態框

2．建立註冊模態框，模態框前幾層div，必定要加上

      <div class="modal fade" id="addAttribute" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">

           <div class="modal-dialog">

         <div class="modal-content modal-content_1">

         ……

         ……

 

     

3．在上面幾層div的包裹下，寫出模態框的頭部div  ----- modal-header

         <div class="modal-header">     </div>

 

 

4.主要內容寫在<div class="modal-body">內

     <div class="modal-body">

         <div></div>

         <div></div>

         ……

      </div>

 

5.模態框以<form>表單提交，模態框最下方爲按鈕

   <button type="submit" class="btn btn-primary col-sm-2 modal-button" style="margin-left: 100px;right:40px;" >確認</button>

<button type="button" class="btn btn-default col-sm-2 modal-button" data-dismiss="modal" onclick="closeModal()">取消</button>

 

 

6. <button> 所在div爲模態框底部div  modal-footer

      <div class="modal-footer" style="margin-top: 20px;">