在模態框外關閉/打開引導模態？

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 來完成，這里是我從文檔 源獲得的答案

此代碼使用 js 顯示模態：

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

此代碼使用 javascript 隱藏模態：

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

當然，如果您使用引導程序，您已經可以訪問 jquery。

Answer 2

您可以使用以編程方式切換模式

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