jQuery 使用 Twitter 引导模式而不是确认对话框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12218444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:26:16  来源:igfitidea点击:

Using Twitter bootstrap modal instead of confirm dialog

jquerytwitter-bootstrapmodal-dialogconfirm

提问by Ayhan

I am trying to use twitter bootstrap modal instead of custom confirm dialog.

我正在尝试使用 twitter bootstrap 模式而不是自定义确认对话框。

my function

我的功能

function getConfirm(confirmMessage){
    if ( confirmMessage == undefined){
        confirmMessage = '';
    }
    $('#confirmbox').modal({
    show:true,
        backdrop:false,
        keyboard: false,
    });

    $('#confirmMessage').html(confirmMessage);
    $('#confirmFalse').click(function(){
        $('#confirmbox').modal('hide');
        return false;
    });
    $('#confirmTrue').click(function(){
        $('#confirmbox').modal('hide');
        return true;
    });
}   
</script>
<div class="modal" id="confirmbox" style="display: none">
    <div class="modal-body">
        <p id="confirmMessage">Any confirmation message?</p>
    </div>
    <div class="modal-footer">
        <button class="btn" id="confirmFalse">Cancel</button>
        <button class="btn btn-primary" id="confirmTrue">OK</button>
    </div>
</div>

calling the function

调用函数

var confimChange=getConfirm("Do You confirm?");
if(confimChange){
    alert('perfect you confirmed')
}else{
    alert('why didnt you confirmed??')
}

the problem is getConfirm function is not returning true or false.

问题是 getConfirm 函数没有返回 true 或 false。



WORKING CODE:

工作代码:

if(receiverListCount > 0){
    var confimChange=confirm("Message");
    if(confimChange){
        resetReceiverList();
    }else{
        return false;
    }
}

code piece after modifications & changes /not working

修改和更改后的代码段/不工作

if(activeDiv == '#upload'){
    if(listOfSelectedGroups.length> 0|| receiverListCount > 0){
        getConfirm("message",function(result){
            if(result){
                resetReceiverList();
            }else{
                return false;
            }
        });
    }
}


finaly I decided to use bootboxjs

最后我决定使用 bootboxjs

回答by Lloyd

Your approach is wrong, it will execute kind of asynchronously so that it won't wait for the modal dialog to be closed before returning. Try something like this:

您的方法是错误的,它将以异步方式执行,因此它不会在返回之前等待模态对话框关闭。尝试这样的事情:

function getConfirm(confirmMessage,callback){
    confirmMessage = confirmMessage || '';

    $('#confirmbox').modal({show:true,
                            backdrop:false,
                            keyboard: false,
    });

    $('#confirmMessage').html(confirmMessage);
    $('#confirmFalse').click(function(){
        $('#confirmbox').modal('hide');
        if (callback) callback(false);

    });
    $('#confirmTrue').click(function(){
        $('#confirmbox').modal('hide');
        if (callback) callback(true);
    });
}  

getConfirm('Are you sure?',function(result) {
   // Do something with result...
});

Note however you only really need to initialize the modal once and hook the events once. I'd give the modal body and ID and simply change the content before showing.

但是请注意,您实际上只需要初始化一次模态并挂钩一次事件。我会给出模态主体和 ID,并在显示之前简单地更改内容。

You should also set backdrop to true, you want a confirmation to prevent the user from accessing the page until they confirm.

您还应该将背景设置为 true,您需要确认以防止用户在他们确认之前访问该页面。