使用jQuery的blockUI插件可以在網頁中創建和管理自定義的模態對話框、載入提示和加載動畫等。以下是一個簡單的使用示例:
首先,引入jQuery和blockUI插件的庫文件:
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/block-ui"></script>
然后,在需要使用blockUI的地方調用相關函數即可。例如,在點擊按鈕時顯示一個載入提示:
<button id="btn">點擊加載</button>
<script>
$(document).ready(function() {
$('#btn').click(function() {
$.blockUI({ message: '<h2>正在加載中...</h2>' });
setTimeout($.unblockUI, 2000);
});
});
</script>
在這個示例中,當按鈕被點擊時,調用$.blockUI()
函數創建一個帶有提示信息的模態對話框。之后,使用setTimeout()
函數延遲2秒后調用$.unblockUI()
函數關閉模態對話框。
你可以根據自己的需求使用不同的blockUI函數,例如顯示加載動畫、自定義模態對話框內容等。具體的使用方法請參考blockUI插件的文檔。