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() ?

I'm voting to close this question as off-topic because the answer is in the bootstrap documentation — charlietfl, May 23 '17 at 22:34
@charlietfl I'm a bootstrap noob. That's why I am asking the question for myself and others in the future. SO is the new documentation. — Atma, May 23 '17 at 22:36
Call 'show' on load https://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery — Ray Koren, May 23 '17 at 22:38
Possible duplicate of [How to open a Bootstrap modal window using jQuery?](https://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery) — Ray Koren, May 23 '17 at 22:42
Please, at least do the basic Googling before writing a question. — smddzcy, May 23 '17 at 22:42
Asking here before reading the docs is just being completely lazy — charlietfl, May 23 '17 at 22:48
I didn't even know this was a bootstrap widget. I inherited the code. You guys are wound a little tight today. — Atma, May 23 '17 at 22:49
No not at all.... just like most libraries it is well documented — charlietfl, May 23 '17 at 22:49
@charlietfl do you want to talk about this offline, it sounds like there is something more going on. — Atma, May 23 '17 at 22:51

score 3 · Accepted Answer · answered May 23 '17 at 22:47

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>

score 0 · Answer 2 · answered May 23 '17 at 22:39

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>

score 0 · Answer 3 · answered May 23 '17 at 22:40

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
});

score 0 · Answer 4 · edited Mar 26 '22 at 14:21

0

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>

edited Mar 26 '22 at 14:21

Elikill58

4,050
24
23
45

answered Mar 26 '22 at 13:18

divyansh343

1
1

This really just copies one of the other answers, right? – sandrooco Mar 30 '22 at 13:25

how to call javascript modal without button press

4 Answers4