how to call javascript modal without button press

Question

I have the following button:

<button data-toggle="tk-modal-demo" data-modal-options="slide-left" data-dialog-options="sidebar sidebar-size-3 sidebar-size-xs-1 sidebar-offset-0 left" class="btn btn-primary">Slide left</button>

Which calls this modal:

<script id="tk-modal-demo" type="text/x-handlebars-template">
              <div class="modal fade">
                <div class="modal-dialog">
                  <div class="v-cell">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Modal title</h4>
                      </div>
                      <div class="modal-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam atque consequuntur dolore fugiat fugit hic in ipsam iure magnam maxime quaerat, quam qui repellat repellendus temporibus vel vitae voluptate!
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </script>

How can I popup to modal when the page loads instead of when the button is pressed? In other words, what javascript do i call?

Something like tk-modal-demo() ?

Answer 1

You can either add the classes show and in to the HTML, as in:

<div class="modal fade show in">

Or you can invoke the 'show' method programmatically

$(".modal").modal("show");

See running demo below

$(function() {
  /* Or you can invoke the 'show' method programmatically */
  //$(".modal").modal("show");
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div>content</div>

<!-- Either add the classes 'show' and 'in' to the HTML -->
<div class="modal fade show in">
  <div class="modal-dialog">
    <div class="v-cell">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam atque consequuntur dolore fugiat fugit hic in ipsam iure magnam maxime quaerat, quam qui repellat repellendus temporibus vel vitae voluptate!
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

The easiest option is to add the show class to your modal:

<script id="tk-modal-demo" type="text/x-handlebars-template">
    <div class="modal show fade">
        <div class="modal-dialog">
          <div class="v-cell">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                 <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Modal title</h4>
              </div>
              <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam atque consequuntur dolore fugiat fugit hic in ipsam iure magnam maxime quaerat, quam qui repellat repellendus temporibus vel vitae voluptate!
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
              </div>
            </div>
          </div>
        </div>
      </div>
</script>

Answer 3

You can click the button using Javascript:

document.querySelector('button[data-toggle="tk-modal-demo"]').click()

But I highly suggest reading the documentation of the modal, there must be a function to show/hide. For example; if it's a Bootstrap modal, you can show it like this:

$('#tk-modal-demo').modal('show');

---

To make the call on page load:

window.addEventListener('load', function() {
  // CODE GOES HERE
});

Or if you use jQuery:

$(window).on('load',function() {
  // CODE GOES HERE
});

Answer 4

This worked for me in react typescript project

document.querySelector('button[data-toggle="leadModal"]').click()

but you need button with all the required attributes

<button className="main-btn" data-bs-toggle="modal"
     data-bs-target="#leadModal" onClick={openModal}>
     Download Brochure
</button>