How to make an html tag run automatically

Question

 <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">Username or Password is incorrect.</div>
        <div class="modal-footer">
          <a class="btn btn-primary" href="login.html">Ok</a>
        </div>
      </div>
    </div>
  </div>

so i have this tag that is currently a button. When i click on this button it runs a display message.

How can i make this tag to automatically run when the page opens or reloads.

<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>;

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) assume you are using bootstrap model — Madhawa Priyashantha, Mar 18 '19 at 08:22
i dont want to click on anything, i want it to run without clicking anything — ahmed, Mar 18 '19 at 08:22

score 1 · Answer 1 · answered Mar 18 '19 at 08:26

1

The click() method execute a click on an element as if the user manually clicked on it.

Add id on your code:

<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal" id="example">Logout</a>

And use js:

document.getElementById('example').click();

answered Mar 18 '19 at 08:26

A. Meshu

4,053
2
20
34

i want to do it without clicking i pasted the modal code – ahmed Mar 18 '19 at 08:31
This is without clicking (js simulate as if the user click on the link). – A. Meshu Mar 18 '19 at 08:52

score 0 · Answer 2 · answered Mar 18 '19 at 08:23

0

You can use trigger after the page is loaded

$( document ).ready(function() {
    $(".dropdown-item").trigger( "click" );
});

answered Mar 18 '19 at 08:23

Duc Vu

95
1
1
8

score 0 · Answer 3 · answered Mar 18 '19 at 08:55

Based on your comment above...

I am trying to do a form where if the user enters wrong credentials the modal will pop up.

...maybe this will help. If not, then you need to clarify what you're trying to do in your question.

In the snippet below, I have a login form. When the wrong credentials are entered, the modal appears.

$("#login").click(function () {
    // Here you would do your check for correct credentials
    // Obviously you wouldn't want to do this in JS in production
    // I'm assuming there would be an AJAX request here that would validate the user's credentials
    // If valid, proceed. If not, call the modal.
    if ($(username).val() !== "blah" || $(password).val() !== "blah") {
   // Username or password incorrect, show modal
    $("#modal").modal();
  } else {
   alert("Login successful!");
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


Username: <input id="username" type="text" />
Password: <input id="password" type="password" />
<button type="button" id="login" class="btn btn-info">Login</button>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
      </div>
      <div class="modal-body">Username or Password is incorrect.</div>
      <div class="modal-footer">
        <a class="btn btn-primary" data-dismiss="modal">Try again</a>
      </div>
    </div>
  </div>
</div>

Basically, anytime you want the modal to appear automatically (i.e., without clicking on anything), just call it like this:

$("#idOfModal").modal();

If you want to programmatically hide or dismiss the modal, you can do that by passing hide to the modal function:

$("#idOfModal').modal("hide");

Sharan Arumugam · Answer 4 · 2019-03-18T09:54:07.257

you can use $("#logoutModal").modal('show') on $(document).ready(() => ...)

$(document).ready(function() {
  $("#myModal").modal('show');
});

<!-- begin snippet: js hide: false console: true babel: false -->

$(document).ready(function() {
  $("#logOut").modal('show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="logOut" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Are you sure you want to Logout?</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

      </div>
      <div class="modal-body">
        <form>
          <button type="submit" class="btn btn-danger float-right">Yes</button>
        </form>
      </div>
    </div>
  </div>
</div>

How to make an html tag run automatically

4 Answers4