我是编码新手,非常初级。我想要简单的 Bootstrap 5 模态,其中只有两个选项。
输入 关闭按钮
我希望关闭按钮仅在输入值为 123 时才起作用。
谢谢你
我正在使用的示例
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<input type="text" class="form-control" id="name">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
要实现 Bootstrap 5 模式中的“关闭”按钮仅在输入值为“123”时才起作用的功能,您可以添加一些 JavaScript。具体方法如下:
1。 HTML 结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<input type="text" class="form-control" id="inputValue">
<button type="button" class="btn btn-secondary" id="closeButton">Close</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('closeButton').addEventListener('click', function() {
const inputValue = document.getElementById('inputValue').value;
if (inputValue === '123') {
const modal = bootstrap.Modal.getInstance(document.getElementById('exampleModal'));
modal.hide();
} else {
alert('Please enter the correct value (123) to close the modal.');
}
});
</script>
</body>
</html>
2。说明:
input
字段。Close
按钮仅在输入正确的值时才起作用。Close
按钮添加事件侦听器。单击该按钮时,它会检查输入值是否为“123”。如果是,则模式关闭;否则,会显示警报。此解决方案确保模态仅在输入值为“123”时关闭。请随意根据需要自定义警报消息或代码的任何其他部分。