Question

我在网页的HTML代码中包含一个Bootstrap模态窗口，并在发生特定事件（文本字段不为空且字符串与JSON数组中的任何值都不匹配）时显示该窗口。

事件发生时正确显示模态。但是close按钮不起作用，“ X”按钮也不起作用。

Bootstrap模态窗口的按钮默认情况下不起作用，还是我应该添加一些其他功能来让它们执行任务？

这是我插入模式的HTML代码：

<div class="modal" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Error</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="testoMyModal" class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

以下是称为模式的JAVASCRIPT片段：

1）

function validateCitta() {       
    let text = $('#inlineFormInputCitta').val();    
    if (text === "") {            
        $("#errorLog").show();
    }       
    else {           
        $.ajax({
            url: "https://nominatim.openstreetmap.org/search?q=" + encodeURIComponent($("#inlineFormInputCitta").val()) + "&format=geocodejson",
            dataType: "json",
            success: function (data) {    
                var check = false;     
                for (let i = 0; i < data.features.length; i++) {
                    let typeCity = data.features[i].properties.geocoding.type;
                    if (typeCity === "city") {
                        let nameCity = data.features[i].properties.geocoding.name;
                        for (let i = 0; i < json.tappe.length; i++) {
                            let tappa = json.tappe[i];
                            let city = json.tappe[i].city;
                            if (city === nameCity) {
                                console.log("JSON file has been activated");
                                check = true;                       
                                $("#tbody").append("<tr><td>" + tappa.name + "</td><td>" + tappa.state + "</td><td>" + tappa.region + "</td><td>" + tappa.city + "</td></tr>");
                                $("#tabella").show();                                   
                            }    
                            ;
                        }    
                        ;
                    }
                }    
                if (!check) {
                    $('#myModal').show();
                }
            }
        })
    }    
};

2）

function hideTutto() {     
    $('#myModal').hide();
};

默认情况下，这些“模式”按钮不起作用是正常现象吗？如果不是，为什么不呢？

- - E D I T [S O L V E D]

该问题来自语法错误：

我写的是$('#myModal').show();而不是$('#myModal').modal('show');

来源：Modals methods 现在按钮可以使用了。

Answer 1

您可以按以下方式更改代码以获取输出。您实际上必须将$('#myModal').show()更改为$('#myModal').modal('toggle');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script>
            let text = $('#inlineFormInputCitta').val();    
            if (text === "") {            
                $("#errorLog").show();
            }       
            else {           
                $.ajax({
                    url: "https://nominatim.openstreetmap.org/search?q=" + encodeURIComponent($("#inlineFormInputCitta").val()) + "&format=geocodejson",
                    dataType: "json",
                    success: function (data) {    
                        var check = false;     
                        for (let i = 0; i < data.features.length; i++) {
                            let typeCity = data.features[i].properties.geocoding.type;
                            if (typeCity === "city") {
                                let nameCity = data.features[i].properties.geocoding.name;
                                for (let i = 0; i < json.tappe.length; i++) {
                                    let tappa = json.tappe[i];
                                    let city = json.tappe[i].city;
                                    if (city === nameCity) {
                                        console.log("JSON file has been activated");
                                        check = true;                       
                                        $("#tbody").append("<tr><td>" + tappa.name + "</td><td>" + tappa.state + "</td><td>" + tappa.region + "</td><td>" + tappa.city + "</td></tr>");
                                        $("#tabella").show();                                   
                                    }    
                                    ;
                                }    
                                ;
                            }
                        }    
                        if (!check) {
                            $('#myModal').modal('toggle');
                        }
                    }
                })
            }    


            function hideTutto() {
                $('#myModal').modal('toggle');
            };
        </script>
        <div class="modal" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Error</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="testoMyModal" class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

您还可以使用$('#myModal').modal('hide');和$('#myModal').modal('show');完成任务。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script>
            let text = $('#inlineFormInputCitta').val();    
            if (text === "") {            
                $("#errorLog").show();
            }       
            else {           
                $.ajax({
                    url: "https://nominatim.openstreetmap.org/search?q=" + encodeURIComponent($("#inlineFormInputCitta").val()) + "&format=geocodejson",
                    dataType: "json",
                    success: function (data) {    
                        var check = false;     
                        for (let i = 0; i < data.features.length; i++) {
                            let typeCity = data.features[i].properties.geocoding.type;
                            if (typeCity === "city") {
                                let nameCity = data.features[i].properties.geocoding.name;
                                for (let i = 0; i < json.tappe.length; i++) {
                                    let tappa = json.tappe[i];
                                    let city = json.tappe[i].city;
                                    if (city === nameCity) {
                                        console.log("JSON file has been activated");
                                        check = true;                       
                                        $("#tbody").append("<tr><td>" + tappa.name + "</td><td>" + tappa.state + "</td><td>" + tappa.region + "</td><td>" + tappa.city + "</td></tr>");
                                        $("#tabella").show();                                   
                                    }    
                                    ;
                                }    
                                ;
                            }
                        }    
                        if (!check) {
                            $('#myModal').modal('show');
                        }
                    }
                })
            }    


            function hideTutto() {
                $('#myModal').modal('hide');
            };
        </script>
        <div class="modal" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Error</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="testoMyModal" class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

Bootstrap模式的“关闭”和“ x”按钮为什么不起作用？

1 个答案: