如何使html标记自动运行[重复]

Question

null

 <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>

null

所以我有这个标签，它当前是一个按钮。当我点击这个按钮时，它运行一个显示消息。

如何使此标记在页面打开或重新加载时自动运行。

null

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

null

Answer 1

根据你上面的评论...

我正在尝试做一个表单，如果用户输入错误的凭据，模式将弹出。

…也许这会有帮助。如果不是，那么你需要在你的问题中澄清你想要做什么。

在下面的片段中，我有一个登录表单。当输入错误的凭据时，会出现模态。

null

$("#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>

Answer 2

您可以在加载页面后使用触发器

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

Answer 3

click（）方法在元素上执行单击，就像用户手动单击一样。

在代码上添加id：

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

并使用js：

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