如何模拟点击按钮显示与jquery模态?

Question

我想在远程模态按钮上触发click。在alert对话框关闭后。原因是我想检查用户是否通过了。如果没有警告显示"您需要登录"。用户完成后单击"确定"。一个登录模式显示。

我只能做警报，但我不知道为什么点击不是触发器。下面是代码…

[login link in the hamburger]

(function() {
'use strict'
document.querySelector('#navbarSideCollapse').addEventListener('click', function() {
document.querySelector('.offcanvas-collapse').classList.toggle('open')
})
$('#xModal').on('show.bs.modal', function(e) {
var button = $(e.relatedTarget);
var modal = $(this);
modal.find('.modal-body').load(button.data("remote"));
});

})()
function login_first() {
alert('Please login first!');
$('#login_btn').click();
}

@media (max-width: 991.98px) {
.offcanvas-collapse {
position: fixed;
top: 56px;
/* Height of navbar */
bottom: 0;
right: 100%;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(100%);
}
}
div.body{
margin-top:100px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<div class="content">
<main>
<div class="row">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" id="login_btn" href="#xModal" data-bs-toggle="modal" data-remote="login-form.php" data-bs-target="#xModal">LOGIN HERE!</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Switch account</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
<ul class="dropdown-menu" aria-labelledby="dropdown01">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>  
</div>

<div class="row body">
<h2>
Click <button id="proceed" class="btn btn-primary" onClick="login_first();">here</button> to proceed!
</h2>
</div>
</main>
</div>


<!-- Modal -->
<div class="modal fade" id="xModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">LOGIN</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">[login form here]</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

或者这里为fiddle: https://jsfiddle.net/a8skfyd3/

Answer 1

下面的代码为我工作。我还用你提供的小提琴试了试。我把点击处理程序从你的html。使用确认对话框而不是警告-这样用户可以拒绝登录。

$(document).ready(function() {
function login_first() {
let shouldLogin = confirm("Please log in first!")
if (shouldLogin) {
document.querySelector('#login_btn').click();
}
}
document.querySelector('#proceed').addEventListener('click', login_first)
})