jquery 插件之 BlockUI

BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。

BlockUI以在DOM 中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。

这个jQuery插件的主要用于是防止用户多次提交表单，及在提交后显示一个等待页面（或提示信息）。

 

可以尝试 弹出框中添加一个 “取消” 按钮，当用户取消时，获取后台异步数据中止 ！ 文档中有如下 sample :

<mce:script type="text/javascript"><!-- $(document).ready(function() { $('#test').click(function() { $.blockUI({ message: $('#question'), css: { width: '275px' } }); }); $('#yes').click(function() { // update the block message $.blockUI({ message: "<h1>Remote call in progress...</h1>" }); $.ajax({ url: 'wait.php', cache: false, complete: function() { // unblock when remote call returns $.unblockUI(); } }); }); $('#no').click(function() { $.unblockUI(); return false; }); }); // --></mce:script> ... <input id="test" type="submit" value="Show Dialog" /> ... <div id="question" style="display:none; cursor: default" mce_style="display:none; cursor: default"> <h1>Would you like to contine?.</h1> <input type="button" id="yes" value="Yes" /> <input type="button" id="no" value="No" /> </div>

 

可供参考 。。。