在百度沒有找到什麼很合適的教程（主要是因為不會JSP,JQ）

其實使用起來很簡單，只需要大概三步

第一步：

加入<script>$('#myModal1').modal(show)</script>

這段程式碼，才能有效

第二布：

對於你要使用的按鈕

修改它的程式碼

<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#myModal1" data-backdrop="static">
              <i class="glyphicon glyphicon-repeat"></i>修改 </button>

這裡有一個是  data-backdrop="static"  這句話的意義在於當你點選按鈕除了彈框，點選空白的地方都會關閉彈窗，而加上之後只有有了關閉才會關閉。

第三部：

就是寫你彈窗的內容

<!--詳情按鈕的彈出框 -->
  <div class="modal fade" id="myModal2">
              <div class="modal-dialog">
              <div class="modal-content">
              <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">課程詳情</h4>
              </div>
              <div class="modal-body">
              <ul class="list-unstyled">
              <li><strong>課程編碼：</strong>RGB215</li>
   <li><br></li>
   <li><strong>課程名稱：</strong>資料庫</li>
   <li><br></li>
   <li><strong>課時名稱：</strong>資料庫的種類</li>
   <li><br></li>
   <li><strong>上課時間：</strong>20170725</li>
   <li><br></li>
   <li><strong>課時簡介：</strong>資料庫的歷史及發展</li>
   </ul>
              </div>
              <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
              </div>
              </div>
              </div>
  </div>

格式可能有點亂，但是能使用，主要的是id要注意保持一致

這是我做出來的效果，當然不是最好的，其他方法暫時不清楚。