Bootstrap data-toggle modal content within a function

Question

I'm new to programming, and I have this simple question but I can't figure out how to do it.

I got this working code from Boostrap 4:

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

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

But instead of having a button I want to create a function to fire up the modal content:

function openModal(){
  /* DESCRIPTION: Open the warning modal */
   // data-toggle="modal" data-target="#exampleModal"
}

But I don't know how to the same thing as data-toggle and data-target do in the button click.

Someone has a hint how to do that?

Answer 1

You have to use the Bootstrap JS api for the modal ( Link attached at the end of this answer ).

Here is the straight answer :-)

function openModal(){
   /* DESCRIPTION: Open the warning modal */
   $('#exampleModalLong').modal('show');

}

Here is another SO question related to this : How can I trigger a Bootstrap modal programmatically?

Here is a detailed link on Bootstrap official documentation on various javascript methods for modals.

https://getbootstrap.com/docs/4.0/components/modal/#methods