首页 > 代码库 > jQuery BlockUI Plugin Demo 5（Simple Modal Dialog Example）
jQuery BlockUI Plugin Demo 5（Simple Modal Dialog Example）
Simple Modal Dialog Example
This page demonstrates how to display a simple modal dialog. The button below will invoke blockUI with a custom message. Depending upon the user response (yes or no) an ajax call will be made while keeping the UI blocked.
The following code is used on this page:
<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; }); }); </script> ... <input id="test" type="submit" value="Show Dialog" /> ... <div id="question" 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>
For full-featured modal dialog support, check out Simple Modal by Eric Martin or jqModal by Brice Burgess.
参考：http://malsup.com/jquery/block/#overview
jQuery BlockUI Plugin Demo 5（Simple Modal Dialog Example）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。