Javascript模态的等待结果

Question

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

您可以简单地将事件附加到您的按钮。
但是，用户可能想要关闭 window 而无需执行任何操作。模态 UI 及其叠加层的设计建议在 window 外部单击并关闭它。

为了创建一个在用户关闭您的模式时总是触发事件的事件，您需要附加到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
});

Javascript模态的等待结果

Javascript waiting result of modal

javascript

jquery

modal-dialog

twitter-bootstrap