agregar un botón de cerrar para el modelo jquery (BlockUI)

Question

He utilizado lo siguiente que funciona correctamente, pero tengo que tener un botón de cierre en lugar de cerrar automáticamente la forma de hacerlo? (Estoy usando 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

Salida this.

La idea es mostrar un cuadro de diálogo personalizado y llamar a $ .unblockUI(); cuando el usuario hace clic en el botón "No".

Answer 2

No sé si todavía está interesado en esto, pero lo estaba buscando y no pude encontrarlo, así que tuve que crear mi propia solución. Usted tiene que actualizar el plugin aunque (jquery.blockUI.js), e ir a esta línea:

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

y sustituirla por esta otra:

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>'; 

Esto añadirá un botón para el título bar. Para agregar un controlador de clic de botón:

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

Usted puede ser más elegante y añadir una opción adicional, algo así como showCloseButtonUI y mostrarlo sólo cuando se establece en true.