Efficiently Composing a Dialog using BlockUI and jQuery
<p>I am creating a small wrapper for the fantastic <a href="http://jquery.malsup.com/block/" rel="nofollow">BlockUI</a> plugin used in my application to easily create dialogs that meet my needs.</p>

<p>Sometimes I am a bit jQuery retarded and would like to know from any of the aficionados out there how they would do this particular task.</p>

<p>This function creates a header, middle and footer custom to my application. Uses some passed in options to fill out the HTML further. Composes the dialog and then inserts it into the <a href="http://jquery.malsup.com/block/" rel="nofollow">BlockUI</a> plugin.</p>

<pre><code>function blockApp(element, options){
    var header = jQuery('&lt;div class="modal-header clearfix"&gt;&lt;h2&gt;&lt;/h2&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;'),
        center = jQuery('&lt;div class="modal-content"&gt;&lt;/div&gt;'),
        footer = jQuery('&lt;div class="modal-footer"&gt;&lt;/div&gt;');

    //Compose dialog
    var opts = jQuery.extend({}, dialogDefaults, options);
    header.find('h2').html(opts.title);
    center.html(jQuery(element).html());

    var comp = jQuery('&lt;div&gt;&lt;/div&gt;').append(header).append(center).append(footer);

    jQuery('#notificationUI').block(jQuery.extend({}, standardBlock, {
        message: comp,
    }));
    jQuery('.blockOverlay').click(function(){
        jQuery('#notificationUI').unblock();
    });             
}
</code></pre>

<p>I tried using wrap() and wrapInner() at first with no success also.</p>

<p>My question is <strong>How would John Resig do this</strong>?</p>
