Why don't the Bootstrap Modal "close" and "x" buttons work?

Question

I included a Bootstrap modal window in the HTML code of my webpage and I display it when a particular event occurs (a text field isn't empty and the string doesn't match any of the values in a JSON array).

The modal is displayed correctly when the event occurs. But the close button doesn't work, neither does the "X" button.

Shouldn't the buttons of a Bootstrap modal window work by default or should I add some other function to let them do the task?

This is the HTML code where I inserted the modal:

<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>

And the following are the JAVASCRIPT snippets where the modal is called:

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();
};

Is it normal that these Modal buttons don't work by default? If not, why don't they?

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

The issue came from a syntax error:

I wrote $('#myModal').show(); instead than $('#myModal').modal('show');

source: Modals methods Now the buttons work.

Can you provide any working code example, and you provided two method definition whic doesent link with the html code you provided. — Sethuraman, Jul 02 '19 at 09:51
the two methods link with the ID "#myModal" assigned to the bootstrap modal — franz1, Jul 02 '19 at 09:56
if you copy and paste a modal snippet from getbootstrap.com does that modal close? — madalinivascu, Jul 02 '19 at 09:58
@Synapsis you comment does't add any value to this question, and i didn't downvote — madalinivascu, Jul 02 '19 at 09:59
@franz1 are you sure you don't have any errors?, did you add the js bootstrap library? — madalinivascu, Jul 02 '19 at 10:01
The modal doesn't close if you click on "X" only? If you click on "Close" button in the modal footer, it works? — fmineo, Jul 02 '19 at 10:04
@madalinivascu yes I added the bootstrap library... No, when the modal is displayed I see no error, neither I do when I click on the "close" and "x" buttons — franz1, Jul 02 '19 at 10:04
@madalinivascu I copypasted another modal and uncomment the previous one. I assigned the same ID: I get the same problem! — franz1, Jul 02 '19 at 10:09
Try `$('#myModal').modal('show');` and `$('#myModal').modal('hide');` — User863, Jul 02 '19 at 10:11
Might it be relevant that the command ' $('#myModal').show();' is inside an ajax call where a boolean flag is being used? — franz1, Jul 02 '19 at 10:14
@madalinivascu No, 'myModal' is used only once in the HTML file — franz1, Jul 02 '19 at 10:15
Why not check the docs when you're having trouble?! [There is no such method as `.show()`](https://getbootstrap.com/docs/3.4/javascript/#modals-methods). — Don't Panic, Jul 02 '19 at 11:51
thank you @Don'tPanic. The issues came from that syntax error. I edited the Question — franz1, Jul 02 '19 at 12:36

Coder · Answer 1 · 2019-07-02T10:44:38.523

You can change your code as below to get the output. You actually have to change the $('#myModal').show() into $('#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>

you can also use $('#myModal').modal('hide'); and $('#myModal').modal('show'); to accomplish your task.

<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>

Was this answer useful @franz1 ? – Coder Jul 17 '19 at 05:32 — Coder, Jul 17 '19 at 05:32

score 0 · Answer 2 · answered Jun 21 '22 at 16:10

0

For new comers using data-bs-dismiss="modal" instead of data-dismiss="modal" makes close button work. thanks to https://stackoverflow.com/a/65799124/8722913

answered Jun 21 '22 at 16:10

Mohamad Elnaqeeb

541
4
13

Why don't the Bootstrap Modal "close" and "x" buttons work?

2 Answers2