[Bootstrap] Modal BlockUI 鎖畫面

web前端，在使用者按下功能按鈕到後端做處理的這段時間中，我們習慣用BlockUI 來鎖定畫面，以防止使用者在後端尚在處理中的時候，可能再次按下功能按鈕或做其他操作導致系統出錯的問題，不過有個問題，如果在已有Modal是show的情況下，直接使用blockUI的話，UI畫面會變得很奇怪，如下圖。

其實解決方法很簡單，直接指定開啟的Modal再blockUI的話，就可以解決這個問題。

範例:

1.view html code

@*Open Modal Button*@
<button onclick="$('#confirmModal').modal('show')">OpenModal</button>
@*Modal*@
<div id="confirmModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" id="confirmcontext">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 id="confirmTitle" class="semi-bold">訊息</h4>
            </div>
            <div id="confirmBady" class="modal-body land-inline-striped"></div>
            <div class="modal-footer text-left">
                <button type="button" id="confirmYes" class="btn btn-primary" onclick="ModalBlockUI();">測試blockUi</button>
                <button type="button" id="confirmYes" class="btn btn-primary" data-dismiss="modal">確認</button>
                <button type="button" id="confirmNo" class="btn btn-default" data-dismiss="modal" hidden>取消</button>
            </div>
        </div>
    </div>
</div>

2. JavaScript code

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
    <script>
        function ModalBlockUI() {
            $('#confirmModal').block({ message: "處理中..." });
            setTimeout(function () { $('#confirmModal').unblock(); }, 1000);
        }
    </script>

3.結果