bootstrap modal open event

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

View another examples Add Own solution

Alessandro Sassi 120 points

                                    $('#code').on('shown.bs.modal', function (e) {
  // do something...
})

Thank you! 4

4 (4 Votes)

4.25

Andra 115 points

                                    &lt;div class=&quot;modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;
  &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
        &lt;h5 class=&quot;modal-title&quot;&gt;Modal title&lt;/h5&gt;
        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
          &lt;span aria-hidden=&quot;true&quot;&gt;&times;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
        &lt;p&gt;Modal body text goes here.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Thank you! 4

4.25 (4 Votes)

3.71

Miskkie 65 points

                                    $(&quot;#myModal&quot;).modal()

Thank you! 7

3.71 (7 Votes)

4.5

Dmkerr 125 points

                                    $(&quot;#myModal&quot;).modal(); //open modal
$('#myModal').modal('toggle'); //open modal
$('#myModal').modal('show'); //open modal
$('#myModal').modal('hide'); //hide modal
//@sujay

Thank you! 2

4.5 (2 Votes)

4.17

Zahra Alobaydi 100 points

                                    &lt;button type=&quot;button&quot; class=&quot;btn btn-info btn-lg&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;Open Modal&lt;/button&gt;

&lt;!-- Modal --&gt;
&lt;div id=&quot;myModal&quot; class=&quot;modal fade&quot; role=&quot;dialog&quot;&gt;
  &lt;div class=&quot;modal-dialog&quot;&gt;

    &lt;!-- Modal content--&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;
        &lt;h4 class=&quot;modal-title&quot;&gt;Modal Header&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
        &lt;p&gt;Some text in the modal.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/div&gt;

Thank you! 6

4.17 (6 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Other

Other 2023-03-27 22:50:10 how to select the whole line in vscode with keyboard shortcut
Other 2022-03-27 22:45:24 income of a web developer
Other 2022-03-27 22:35:01 \pyrcc_main.py: File does not exist 'resources.qrc'
Other 2022-03-27 22:30:45 rick roll embed code
Other 2022-03-27 22:20:08 Circuit_04_Potentiometer
Other 2022-03-27 22:20:05 iterative power
Other 2022-03-27 22:15:11 flutter run all
Other 2022-03-27 22:10:05 when is karlson release
Other 2022-03-27 22:10:02 wp .htaccess example
Other 2022-03-27 22:00:08 bash pause in file read line by line

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

bootstrap modal open event

Welcome Back!

Create a Free Account