Add close button in jquery model (BlockUI)

Question

I used the following, which works correctly, but I need to have a closed button, and not close automatically, how to do this? (I am using jQuery BlockUI http://www.malsup.com/jquery/block/#demos )

$(document).ready(function() { $('#app').click(function() { $.blockUI({ theme: true, title: 'Welcome to your page', message: '<p>Please have a look..</p>', timeout: 2000 }); }); }); 

Answer 1

I don’t know if you are interested in this, but I was looking for it and could not find it, so I had to create my own solution. You should update the plugin though (jquery.blockUI.js) and go to this line:

 if ( opts.title ) { s += '<div class="ui-widget-header ui-dialog-titlebar ui-corner-all blockTitle">'+(opts.title || '&nbsp;')+'</div>'; 

and replace it with this:

 if ( opts.title ) { s += '<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">' +(opts.title || '&nbsp;')+ '</span><button id="btnCloseBlockUI" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button></div>'; 

This will add a button to the title bar. To add a button click handler:

 //Unblocks the UI when clicking the close button $("button#btnCloseBlockUI.ui-button").click(function () { $.unblockUI(); }); 

You can be more fantastic and add an additional parameter, for example, showCloseButtonUI and display it only when it is set to true.

Answer 2

Mark it .

The idea is to display a user dialog and call $ .unblockUI (); when the user clicks the no button.