Блокировка элемента jQuery BlockUI не работает

Question

Я пытаюсь заблокировать элемент div на своей странице.Я уже прочитал документацию о блокировке элементов в 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>

Пожалуйста, совет