Dismiss blockUI Via Button

Question

I am trying to dismiss my modal, which is generated via blockUI. I am having trouble catching the click event so the dismiss method never fires. Maybe someone has run into this before?

Here is the pertinent code presented as a Fiddle

function blockUIDisplayMessage(title, message) {


    var msg = '<div id="block-ui-dialog"><img src="/path/to/img.png"/><h2>' + title + '</h2><p>' + message + '</p><p> <input type="button" value="OK" class="btn blue" id="block-ui-dialog-btn"></p></div>';

    $.blockUI({ message: msg, css: { wdth: '431px', border: '1px solid #000000', padding: '30px' } });

}

function blockUIDismissMessage() {

    $.unblockUI();
}

$('#block-ui-dialog-btn').click(function() {

    $.unblockUI();
});

Answer 1

Well, your #block-ui-dialog-btn element is not exists when you try to bind the click event. you can use the onclick evenet like:

<input onclick="$.unblockUI();" type="button" value="OK" class="btn blue" id="block-ui-dialog-btn">

or you can find an existing parent element and use the .on('click' ... ) like:

$('#parent').on('click', '#block-ui-dialog-btn', function(){
    $.unblockUI();
});