Close/Open Bootstrap Modal outside modal box?

I’m trying to open/close different modal boxes, without having to press the "Close" button inside the modal box. I haven’t found any solutions yet. What are my options here? Can it be done?

Thanks
AS9

Here is my code:
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 -->

5 thoughts on “Close/Open Bootstrap Modal outside modal box?”

  1. It can be done using javascript, here my answer from doc source

    This code to show the modal using js:

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

    And this code to hide the modal using javascript:

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

    of course, if you are using bootstrap, you already have access to jquery.

    Reply

Leave a Comment