单击reset时不要关闭模态

我不希望在单击reset时关闭模态。它应该重置内部形式。但是我的代码正在关闭模态。

<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<div class="modal fade" id="messagemodal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="$('form').trigger('reset');return false;">Reset</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
var modal = new bootstrap.Modal(document.getElementById('messagemodal'), {
keyboard: false
});
modal.show();
</script>
</body>

从重置按钮中删除data-bs-dismiss="modal"并将其添加到关闭按钮中。注意:如果你想让模态保持打开状态，当用户点击它的外部，你可以添加这个data-bs-keyboard="false" data-bs-backdrop="static"到父div id="messagemodal">

虽然第一步是删除data-bs-dismiss属性和值，但这本身并不能重置<form>，尽管它确实-显然-防止模式被驳回:

const modal = new bootstrap.Modal(document.getElementById('messagemodal'), {
keyboard: false
});
modal.show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="modal fade" id="messagemodal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
</form>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-secondary">Reset</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

相反，你应该删除:

onclick="$('form').trigger('reset');return false;"

因为使用onclick是过时的做法，而你使用的是jQuery，尽管即使是原生JavaScript也提供了比内联事件处理程序更好的不引人注目的方法。

const modal = new bootstrap.Modal(document.getElementById('messagemodal'), {
keyboard: false
});
modal.show();
// I'd prefer a better selector, but I'm working with what you
// have, so here we retrieve the 'reset' button and use the
// on() method to bind the anonymous function as the 
// event-handler for the 'click' event:
$('button.btn.btn-secondary').on('click', function(e){
// here we find the closest '.modal' element:
let modal = $(this).closest('.modal'),
// from the .modal we find the <form> element:
form = modal.find('form');
// and then trigger the reset() function:
form.trigger('reset');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="modal fade" id="messagemodal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
</form>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-secondary">Reset</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

JS Fiddle demo.

如前所述，这在原生JavaScript中也很容易完成(尽管不可否认您可能出于其他原因使用jQuery):

const modal = new bootstrap.Modal(document.getElementById('messagemodal'), {
keyboard: false
});
modal.show();
// caching the resetButton:
let resetButton = document.querySelector('button.btn.btn-secondary');
// binding the anonymous function of EventTarget.addEventListener() as
// the event-handler for the 'click' event:
resetButton.addEventListener('click', function(evt) {
// caching a reference to the clicked element:
let button = evt.currentTarget,
// finding the closest ancestor '.modal' element:
modal = button.closest('.modal'),
// finding the <form> element within the .modal element:
form = modal.querySelector('form');
// calling the reset() function on the <form>:
form.reset();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<div class="modal fade" id="messagemodal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Reset</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

JS Fiddle demo.

此外，虽然这确实对您的布局/呈现有不利影响，但重要的是要记住，如果重置按钮(<button type="reset">)在<form>本身内，则重置功能不需要JavaScript，如下所示:

const modal = new bootstrap.Modal(document.getElementById('messagemodal'), {
keyboard: false
});
modal.show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<div class="modal fade" id="messagemodal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
<div class="modal-footer">
<button type="reset" class="btn btn-secondary">Reset</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>

JS Fiddle demo.

引用:

JavaScript:
- Element.closest().
- Element.querySelector().
- Event.
- EventTarget.addEventListener().
jQuery:
- closest().
- find().
- trigger().

相关内容

最新更新

热门标签：