Bootstrap 4中模态框隐藏无效

Question

Bootstrap 4中模态框隐藏无效

javascriptbootstrap-4bootstrap-modalshow-hide

5

我有一个关于在Bootstrap 4中隐藏模态框的问题。在我的tmp函数中，我需要在关闭模态框后使用update_table(url)方法。

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

我不知道出了什么问题，但是当我尝试使用hide_modal函数代替tmp函数时，模态窗口被隐藏了。

- ProgShiled

1

tmp(url) 函数中的代码说明当模态弹出窗口被 shown 或打开时，将其隐藏。 - SwapNeil

我在控制台中检查状态是否显示。 - ProgShiled

modal('hide') 在显示动画完成之前不起作用，因此在显示事件后立即使用它是无效的。解决方法是将 hide 包装在 setTimeout 中。但这只是一种平庸的解决方法。 - Daniel.P.

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rizwan · Answer 1

第一步。在你的代码中删除这些行

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

步骤2。将hide_modal函数放在所有代码的顶部。然后它将正确显示。

- SwapNeil · Answer 2

这是一个简单的代码，用于 Bootstrap 4 Modal 弹出窗口，它可以隐藏弹出窗口。你可以检查一下。

$('#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>

当弹出窗口显示时，请从浏览器控制台调用此函数：tmp('http://test/test');它将隐藏弹出窗口。它与Bootstrap 3相同。