Close/Open Bootstrap Modal outside modal box?

Question

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

Use this $('#exampleModalThree').modal('hide'); https://stackoverflow.com/questions/10466129/how-to-hide-bootstrap-modal-with-javascript — Prashanth Reddy, Feb 19 '21 at 12:59

Ali Abbas · Answer 1 · 2021-02-19T13:00:06.120

0

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.

edited Feb 19 '21 at 13:00

answered Feb 19 '21 at 12:53

Ali Abbas

1,415
12
19

score 0 · Answer 2 · edited Feb 19 '21 at 13:02

0

You can toggle a modal programmatically with

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

edited Feb 19 '21 at 13:02

Dharman

30,962
25
85
135

answered Feb 19 '21 at 12:56

Andrew

1,006
10
17

Thank you Dharman, noted. Though then why does SO prompt that a user is new and invite you to be nice to them? ;-) Fluff will be avoided in the future. – Andrew Feb 19 '21 at 13:05

Close/Open Bootstrap Modal outside modal box?

2 Answers2