Почему не работают кнопки «закрыть» и «х» в Bootstrap Modal? - PullRequest
Новая
       19

Почему не работают кнопки «закрыть» и «х» в Bootstrap Modal?

0 голосов
/ 02 июля 2019

Я включил модальное окно Bootstrap в HTML-код моей веб-страницы и отображаю его, когда происходит определенное событие (текстовое поле не пустое и строка не соответствует ни одному из значений в массиве 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');

источник: методы модальности Теперь кнопки работают.

1 Ответ

0 голосов
/ 02 июля 2019

Вы можете изменить свой код, как показано ниже, чтобы получить вывод. Вы действительно должны изменить $('#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>
...