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