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
click()方法在元素上执行单击,就像用户手动单击一样。
在代码上添加id:
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal" id="example">Logout</a>
并使用js:
document.getElementById('example').click();
您可以在加载页面后使用触发器
$( document ).ready(function() {
$(".dropdown-item").trigger( "click" );
});
根据你上面的评论...
我正在尝试做一个表单,如果用户输入错误的凭据,模式将弹出。
…也许这会有帮助。如果不是,那么你需要在你的问题中澄清你想要做什么。
在下面的片段中,我有一个登录表单。当输入错误的凭据时,会出现模态。
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>