Javascript 等待模态结果

Question

我有一个关于 javascript 和 bootstrap modal 的简单问题。我有一个使用文件上传表单的向导，因此我检查文件的名称，如果它不包含某些字符串，我必须显示一个模式，询问您是否仍要继续。我如何知道从 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 .