JQuery Block UI on a Dialog

Block UI on Dialog instead of Content

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<script src="http://malsup.github.com/jquery.blockUI.js"></script>
<div id="dialog"><br/><input type="button" class="btn" id="btn2" value="Block Content"/><input type="button" class="btn" id="btn1" value="Block Dialog"/>Your non-modal dialog<br/>Your non-modal dialog<br/>Your non-modal dialog<br/>Your non-modal dialog<br/>Your non-modal dialog<br/>Your non-modal dialog<br/>Your non-modal dialog<br/>Your non-modal dialog<br/>Your non-modal dialog<br/></div>
<a href="#" id="open">Open dialog</a>

JavaScript

$('#open').click(function() {
    $('#dialog').dialog('open');

});

$(".btn").click(function() {
    var ref = $(this).attr("id");
    var container = (ref == "btn1") ? ".ui-dialog": "#dialog";
    console.log("Container is", container);
    
    $(container).block({
       message: '<h1>Processing</h1>' 
    });
    $.ajax({
        url: "/echo/json/",
        data: {
            json: {},
            delay: 5
        }
    }).done(function() {
       console.log("Done with ajax");
        $(container).unblock();
    });
});

jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
        autoOpen: false,
        modal: true,
        height: 200,
        maxHeight: 200,
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                jQuery('#dialog').dialog('close');
            })
        }
    });
});