从 jQuery 模态对话框中获取结果的方法是使用 Bootstrap 模态插件的事件和方法。以下是一个简单的示例:
<!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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Modal -->
<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">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="text" id="inputText" class="form-control">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Open Modal
</button>
<script>
// 监听模态框的隐藏事件
$('#exampleModal').on('hidden.bs.modal', function () {
// 获取输入框的值
var inputTextValue = $('#inputText').val();
// 在此处处理结果
console.log('Input Text Value:', inputTextValue);
});
// 监听保存按钮的点击事件
$('#saveButton').on('click', function () {
// 获取输入框的值
var inputTextValue = $('#inputText').val();
// 在此处处理结果
console.log('Input Text Value:', inputTextValue);
// 关闭模态框
$('#exampleModal').modal('hide');
});
</script>
</body>
</html>
在这个示例中,我们创建了一个包含输入框的模态框。当用户点击“保存更改”按钮时,我们可以获取输入框的值并在控制台中打印出来。此外,当模态框关闭时,我们也可以获取输入框的值并处理结果。
请注意,这个示例使用了 Bootstrap 5,如果您使用的是其他版本,请根据实际情况调整代码。
serverless days
Elastic 中国开发者大会
云+社区技术沙龙[第6期]
腾讯云GAME-TECH沙龙
云+社区技术沙龙[第28期]
云+社区技术沙龙 [第30期]
腾讯云GAME-TECH沙龙
腾讯位置服务技术沙龙
云+社区技术沙龙[第10期]
云+社区开发者大会 武汉站
领取专属 10元无门槛券
手把手带您无忧上云