模态的Javascript等待结果

Question

我有一个关于 javascript 和引导模式的简单问题。我有一个使用文件上传表单的向导，所以我检查文件的名称，如果它不包含一些字符串，我必须显示一个模式，询问你是否要继续。我如何知道从 javascript 或 jquery 中单击了哪个按钮进入模态？ 我有这个代码：

if (index==3){
    var fileControl = document.getElementById('file');
    //Check if the datatable name contains idFLeet and IdCar. REturn -1 if it not contains the string
    if (fileControl.files[0].name.indexOf($("#selectedFleet").val()) > -1 && fileControl.files[0].name.indexOf($("#selectedCar").val()) > -1){
        //File contains id so you can continue the upload
        uploadFunction();
    }
    else{
        $('#warningDatatableModal').modal("show");  
         //If click on Yes call uploadFunction
        //If click on No return false
    }
}

HTML 模态代码：

<div class="modal" id="warningDatatableModal" data-backdrop="static" data-keyboard="false">
    <div class="modal modal-warning">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Warning</h4>
                </div>
                <div class="modal-body">
                    <p>There is a incongruity between file name and fleet and
                        car previously selected. Are you sure to continue?</p>
                </div>
                <div class="modal-footer">
                    <button id="close" type="button" class="btn btn-outline pull-left"
                        data-dismiss="modal">Close</button>
                    <button id="continueButton" type="button" class="btn btn-outline">Continue</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>

在 Yeldar Kurmangaliyev 建议后，我更新了我的代码，但向导转到下一个选项卡而不是等待进入实际选项卡

if (index==3){
    var fileControl = document.getElementById('file');
    //Check if the datatable name contains idFLeet and IdCar. REturn -1 if it not contains the string
    if (fileControl.files[0].name.indexOf($("#selectedFleet").val()) > -1 && fileControl.files[0].name.indexOf($("#selectedCar").val()) > -1){
        //File contains id so you can continue the upload
        uploadFunction();
    }
    else{
        $('#warningDatatableModal').modal("show");  
        $(".modal-footer > button").click(function() {
            clicked = $(this).text();
            $("#warningDatatableModal").modal('hide');
        });
        $("#warningDatatableModal").on('hide.bs.modal', function() {
            if (clicked === "Cancel"){
                return false;
            }else {
                uploadFunction();
            }
        });
    }
}

如果我将此代码置于向导工作之外（它不会使用取消按钮关闭模式，因为我使用了向导所需的 return false），但我需要停止向导等待模式结果。

Answer 1

您可以简单地将事件附加到您的按钮。
然而，用户可能想要关闭窗口而不采取行动。模态 UI 及其覆盖的设计建议在窗口外单击并关闭它。

为了创建一个在用户关闭您的模式时总是触发事件的事件，您需要附加到hide.bs.modal 事件：

$('#warningDatatableModal').on('hide.bs.modal', function() {
});

这是工作的JSFiddle demo。

Answer 2

您可以尝试使用按钮的 ID 并附加一个侦听器以查看它们何时被单击，如下所示：

$('#close').on('click',function(){
    //do something
});

$('#continueButton').on('click',function(){
    //do something
});