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）