Question

我正在尝试打开/关闭不同的模态框，而不必按模态框内的“关闭”按钮。我还没有找到任何解决方案。我在这里有哪些选择？可以吗？

谢谢 AS9

这是我的代码： https://codepen.io/pabs-scl/pen/eYBRqEo

  <section class="container my-5">
    <div class="row">
    <div class="col-6">
      <p>Col-6</p>

      <!-- button 1 -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-backdrop="static" data-keyboard="false">
        Modal 1
      </button>

      <!-- button 2 -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalTwo">
        Modal 2
      </button>

    </div>
    <div class="col-6 holder">
      <p>Col-6</p>

            <!-- Modal 1 -->
            <div class="modal " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
              <h5 class="modal-title" id="exampleModalLabel">Modal one</h5>
            </div>
            </div>
            </div>


            <!-- Modal 2 -->
            <div class="modal " id="exampleModalTwo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelTwo" aria-hidden="true" data-backdrop="static" data-keyboard="false">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
              <h5 class="modal-title" id="exampleModalLabelTwo">Modal two</h5>
            </div>
            </div>
            </div>

    </div> <!-- col-6 -->
  </div> <!-- row -->
  </section> <!-- container -->

Answer 1

可以使用 javascript 来完成，这里是我来自 doc source

的回答

此代码使用js显示模态：

$('#exampleModal').modal('show')

此代码使用 javascript 隐藏模态：

$('#myModal').modal('hide')

当然，如果您使用的是引导程序，那么您已经可以访问 jquery。

Answer 2

您可以使用

以编程方式切换模式

$('#exampleModal').modal('toggle')

在模态框外关闭/打开 Bootstrap 模态？

2 个答案: