Bootstrap 在.show()完成之前隐藏引导程序5模态

ql3eal8s 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(181)

在Bootstrap 5中，调用Modal.hide()没有任何效果，除非它发生在模态完成渐变/过渡效果之后。
通过删除fade类，hide方法立即生效。
如何在保持渐变效果的同时实现这一点？
在下面的例子中，点击一个按钮将在模态中显示关于该项目的信息。假设你不小心点击了错误的按钮，你应该能够立即退出（取消.show()），这样你就可以点击正确的按钮。

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>Modal Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>

    <!-- Buttons -->
    <button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 1">
        Item # 1
    </button>

    <button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 2">
        Item # 2
    </button>

    <button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 3">
        Item # 3
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    ...
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
            keyboard: false
        })

        $('.item-button').click(function(){
            $('#myModal').find('.modal-body').text($(this).data('item-info'))
            myModal.show();
        })

        $('.modal').click(function(e){
            if(!$(e.target).hasClass("modal-body")){
                myModal.hide();
            }
        })

    </script>
</body>
</html>

twitter-bootstrap

来源：https://stackoverflow.com/questions/67883102/hide-bootstrap-5-modal-before-show-is-finished

2条答案

按热度按时间

aor9mmx11#

更新-阻止或隐藏模态

为了回应您最新的评论- * 如何提前取消Modal.show（）* -我不相信您可以 * 取消 * 一个模态被显示为“提前”。
您可以 block 一个模型，使其完全不显示--将preventDefault()返回到show.bs.modal事件（这目前只起作用一次，之后您就不能打开模态，但在版本5.0.2中应该是fixed）。
或者，您可以使用shown.bs.modal事件 * 等待 * 模态显示，然后告诉它隐藏。
当modal得到允许打开时（show.bs.modal事件不返回preventDefault），两个值被设置为true，this._isShown和this.isTransitioning。在modal完全显示之前，你不能使用hide（），因为这两个值在[hide（）函数]（https：//github.com/twbs/bootstrap/blob/main/js/src/modal.js#L146）中被检查，隐藏请求将被忽略，直到modal显示并不再转换。
引导程序5代码

hide(event) {
    if (event && ['A', 'AREA'].includes(event.target.tagName)) {
      event.preventDefault()
    }

    if (!this._isShown || this._isTransitioning) {
      return
    }

如果你决定在模态转换时隐藏模态，你可以等待shown.bs.modal事件，然后从那里调用hide。如果你需要知道模态是显示还是转换，或者其他什么，你可以使用一些变量来跟踪它（从show和showed侦听器设置变量，从hide和hidden侦听器取消设置变量）。
第一个
如果您想再次运行preventDefault模态，则需要重新加载页面。

赞(0）回复(0）举报 2022-12-07

blmhpbnm2#

Rich DeBourke在他的回答中正确地指出，Bootstrap modal.js中的hide（）函数如果处于转换状态，则会提前返回：

class Modal extends BaseComponent {
  //...
  hide() {
    if (!this._isShown || this._isTransitioning) {
      return
    }
    //...
  }
}

作为一种解决方法，您可以改为调用模态的dispose()方法：

function hideExistingModal(targetEl) {
    if (targetEl) {
        var modal = bootstrap.Modal.getInstance(targetEl);
        if(modal){
            modal._isTransitioning ? modal.dispose() : modal.hide();
        }
    }
}

dispose()函数的处理更复杂，如果模态处于转换状态，它将 * 抛出异常 *（由于_isAnimated()函数在超时后被调用-它试图引用不再存在的模态）。这意味着它将总是抛出异常，因为只有当模态处于转换状态时才调用dispose()。
此解决方法提供了所需的功能，但代价是出现一个难看的控制台错误。
希望this._isTransitioning为false的要求在未来的版本中被删除，这样就不必使用这个丑陋的解决方案。

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 在.show()完成之前隐藏引导程序5模态

2条答案

更新-阻止或隐藏模态

相关问题

热门标签

最新问答