添加关闭按钮到jquery模型(BlockUI)

时间:2012-09-21 12:11:57

标签: jquery jquery-plugins

我使用了以下正常工作,但我需要一个关闭按钮,而不是自动关闭如何做到这一点? (我正在使用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 
        }); 
    });    
}); 

2 个答案:

答案 0 :(得分:2)

我不知道你是否仍然对此感兴趣,但我一直在找它并找不到它,所以我不得不创建自己的解决方案。你必须更新插件(jquery.blockUI.js),然后转到这一行:

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

并将其替换为:

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

这会在标题栏中添加一个按钮。要添加按钮单击处理程序:

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

您可以更加喜欢并添加额外的选项,例如showCloseButtonUI,只有在设置为true时才会显示。

答案 1 :(得分:1)

查看this

想法是显示一个自定义对话框,并调用$ .unblockUI();当用户点击“否”按钮时。