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