[MVC]在modal上層加blockUI

 需求:

有時候需要在modal顯示的時候，也想使用blockUI來鎖住畫面不讓使用者使用，但卻會發現雖然blockUI有成功顯示，但卻是顯示在modal的下層。

實作:

(1)在modal上加上button來測試blockUI

@*訊息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="TestModalBlockUI();">測試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  用JQeury鎖定Modal的Id使用.block():

 function TestModalBlockUI() {
            $("#confirmModal").block({ message: "處理中..." });
            setTimeout(function () { $("#confirmModal").unblock(); }, 1000);
        }

範例結果:

遇到問題:blockUI is not a function

多引用這行: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>

參考:jquery block ui getting $.blockUI is not a function

Git支援:

https://github.com/scottHsuHGIGA/ModalBlockUI