使用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插件的文档。