jQuery BlockUI元素阻止不起作用

Question

我尝试阻止页面中的div元素。我已经从documentation website阅读了有关jQuery中元素阻塞的文档。但这不起作用，我一无所知。

blockUI参考

控制台错误

请在下面查看我的代码。

@{
    ViewBag.Title = "BlockUIPage";
}
<style>
    .container-cnt {
        width: 800px;
        height: 500px;
        border: 1px solid olive;
        margin: 10px;
        padding: 50px;
        background-color: aqua;
    }

    .child {
        height: 100%;
        width: 100%;
        background-color: mistyrose;
    }
</style>
<h2>BlockUIPage</h2>


<div id="outerCnt" class="container-cnt">
    <div id="innerCnt" class="child"></div>
</div>
<p>
    <input type="button" id="btnOuter" value="Block Outer Page" 
    onclick="fnBlock('outerCnt','Block Outer Div element.')" />
    <input type="button" id="btnInner" value="Block Inner Page" 
    onclick="fnBlock('innerCnt', 'Block Inner Div element.')" />
</p>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
    $(function () {
    });

    function fnBlock(element, messageText) {
        debugger;
        $('div#' + element).block({
            message: messageText,
            css: { border: '3px solid #a00' }
        });
    }
</script>

请咨询