使用jQuery unblock UI搭建自訂的訊息視窗

這裡分享使用jQuery unblock UI搭建簡易訊息視窗。

1. 排版設定了id為err_box與id為msg_box這兩個div，用來讓unblock顯示訊息用的。

2. 引用unblock ui跟jquery

3. ublk是隱藏顯示的block ui；blk是開啟一個預設顯示'loading'的block ui。

4. err_msg和msg_box就是方便函數，給定訊息就會顯示錯誤視窗或是訊息視窗

<div id="err_box" style="display:none;cursor:default;background-color:red">

<h1 class="m"></h1>

<button class="y">確認</button>

</div>

<div id="msg_box" style="display:none;cursor:default">

<h1 class="m"></h1>

<button class="y">確認</button>

</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js'></script>

<script>

function ublk() {

$.unblockUI()

}

function blk(n) {

$.blockUI({ message: (n ? (typeof (n) === "string" ? n : $(n)) : 'loading') })

}

function err_msg(m) {

ublk();

var b = $('#err_box');

b.children('.m').text(m);

b.children('.y').unbind().click(ublk);

blk(b);

}

function msg_box(m, y) {

ublk();

var b = $('#msg_box');

b.children('.m').text(m);

b.children('.y').unbind().click(y ? y : ublk);

blk(b);

}

</script>