模态隐藏在 Bootstrap 4 中不起作用

Question

I have problem with hiding modal in bootstrap 4. In my tmp function I have to close modal after that I need use method update_table(url)

HTML and JS

<div class="modal" id="Modal" tabindex="-1" role="dialog"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>


<script type="text/javascript">
    function abrir_modal(url) {
        $('#Modal').load(url, function () {
            $(this).modal('show');
        });
        return false;
    }

    function tmp(url) {

        $('#Modal').on('shown.bs.modal', function (e) {
            $("#Modal").modal('hide');
        })
            update_table(url);


    }

    function update_table(url) {
        $.ajax({
            type: "GET",
            url: url
        })
            .done(function () {
                refresh_table();
            });
    }

    function refresh_table() {
        $.ajax({
            type: "GET",
            url: "{% url 'Project:Task_Schedule_TableView' %}"
        })
            .done(function (response) {
                $("#_appendHere").load("{% url 'Project:Task_Schedule_TableView' %}" + "#_appendHere");
            });
    };
function hide_modal() {
    console.log($('#Modal').modal('name'))
    $('#Modal').modal('hide');
    console.log(33)
    return false;
}
</script>

I don't know what is wrong but when I try use the hide_modal function instead of the tmp function, modal is hidden.

Answer 1

This is simple code for Bootstrap 4 Modal Pop Up which hide the pop up. You can check this..

 $('#Modal').modal('show'); function tmp(url) { $("#Modal").modal('hide'); } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <div class="modal" id="Modal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

When the pop up is shown call this function from browser console.. tmp('http://test/test'); it will hide the pop up. It same as Bootstrap 3

Answer 2

Step 1. Remove these lines from your code

 $('#Modal').on('shown.bs.modal', function (e) {
        $("#Modal").modal('hide');
    })

Step 2. put the hide_modal function top of all code. Then it will be appeared properly.