技術標籤：js

模態框從運用場景來看 , 有一個比較顯著的特點是:
不會造成頁面跳轉 , 從而打亂或中斷使用者的使用體驗;

例如 :
某購買頁面 , 點選加購按鈕 , 大致流程是 :

1. 判斷使用者是否登入 ;
2. 如果未登入 , 會讓客戶先登入 ;
3. 而後對購物車物件進行相應操作 ;

日常的思路是 :

1. 當用戶未登入時 , 會跳轉到登入頁面 ;
2. 完成登入後 , 跳轉到首頁 ;
3. 這樣會存在加購頁面丟失的問題 [雖然可以通過傳參 , 實現訪問商品頁面URL的轉發] ; 但是,也需兩個頁面中跳轉 , 略有繁瑣 ; 尤其在確定下單環節, 怎麼可以做的這麼不流暢呢 ?

因而 , 模態框在此發揮了很好的作用 , 我的實踐思路是 :

1. 點選加購按鈕 , 提交servlet , 根據session判斷是否已登入;
2. 如果已登入 , 直接進行加購程式碼的執行;
3. 如果未登入 , 跳出模態框 , 提示使用者登入 ; 使用者登入成功後 , 緊接執行相應加購程式碼的執行 .
4. 這樣一來 , 整個購買操作就更加流程 .

====================

<div class="modal fade" id="myModal"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby
 
="myModalLabel">
<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><span class="sr-only">Close</span></button>
            <h4 class="modal-title">使用者登入</h4>
          </div>
          <div class="modal-body">
            <p>相應input控制元件</p>
            <textarea class="form-control"></textarea>
          </div>
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">關閉</button>
            <button class="btn btn-primary" type="button">提交</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div>

$("#myModal").modal('show'); // 開啟
$("#myModal").modal('hide'); // 關閉
$("#myModal").modal('toggle'); // 切