jQuery 从 Bootstrap 模式取回数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16915278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting data back from a Bootstrap modal
提问by Davor
I have a signup page that triggers a modal window (using Bootstrap) containing for example a Facebook login and I want this modal to pass back data (errors, or if success the token / user data) to the main window so I can fill the relevant form fields and let the user complete the signup process (tick the "I approve the terms and conditions" box etc.).
我有一个注册页面，它触发一个模态窗口（使用Bootstrap），其中包含例如 Facebook 登录信息，我希望这个模态将数据（错误，或者如果成功则令牌/用户数据）传回主窗口，以便我可以填写相关表单字段并让用户完成注册过程（勾选“我同意条款和条件”框等）。
I know how to do all of it except the bit about sending data back when the modal closes. Is there a way to pass data from the modal to the main window on the modal close event?
我知道如何做所有这些，除了关于在模式关闭时发回数据的一点。有没有办法在模态关闭事件中将数据从模态传递到主窗口？
EDIT: here is a visual representation of what I want to accomplish:
编辑：这是我想要完成的视觉表示：
回答by davidkonrad
Well. You have access to both the main window and the modal content, so basically you just need to copy content from modal elements before closing. Working Example (copy the two codeblocks into two files) :
好。您可以访问主窗口和模态内容，因此基本上您只需要在关闭之前从模态元素中复制内容。工作示例（将两个代码块复制到两个文件中）：
auth.php(dont know how your auth works, but perhaps you call a remote login and get some results, you can store in a JSON-array)
auth.php（不知道您的身份验证如何工作，但也许您调用远程登录并获得一些结果，您可以存储在 JSON 数组中）
<label for="modal-username">Username</label><input type="text" name="modal-username" id="modal-username">
<?
$result = array();
$result['error']='error';
$result['auth']='auth';
$javascript_array = json_encode($result);
?>
<input type="hidden" id="modal-result" value='<? echo $javascript_array;?>'>
modal.html, main window
modal.html，主窗口
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- button to trigger modal -->
<a href="auth.php" data-target="#myModal" data-toggle="modal">remote modal</a>
<!-- hidden fields to store modal result in -->
<input type="hidden" id="main-username">
<input type="hidden" id="main-result">
<!-- modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal test</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary" onclick="login();">Login</button>
</div>
</div>?
<script type="text/javascript">
//called when user clicks login
function login() {
$("#main-username").val($("#modal-username").val());
$("#main-result").val($("#modal-result").val());
$("#myModal").modal("hide");
}
//called when the modal is closed, logs values grabbed from the modal in login()
$('#myModal').on('hidden', function() {
console.log('username : '+$("#main-username").val());
console.log('result : '+$("#main-result").val());
})
</script>
</body>
</html>
回答by Srini
Bootstrap provides the following inbuilt event handling to achieve this:
Bootstrap 提供了以下内置事件处理来实现这一点：
show.bs.modal- Occurs when the modal is about to be shown
shown.bs.modal- Occurs when the modal is fully shown (after CSS transitions have completed)
hide.bs.modal- Occurs when the modal is about to be hidden
hidden.bs.modal- Occurs when the modal is fully hidden (after CSS transitions have completed)
show.bs.modal- 在模态即将显示 时发生。
show.bs.modal- 在模态完全显示时发生（在 CSS 转换完成后）
hide.bs.modal- 在模态即将被隐藏时发生
hidden.bs.modal- 当模态完全隐藏时发生（在 CSS 转换完成后）
For your case you can use the hide.bs.modal event to get the values of the modal attributes after the button is clicked and before the modal is hidden. By this way the example given by davidkonrad can be achieved in a single function eliminating the need for intermediate hidden attributes.
对于您的情况，您可以使用 hide.bs.modal 事件在单击按钮后和隐藏模态之前获取模态属性的值。通过这种方式，davidkonrad 给出的例子可以在单个函数中实现，消除了对中间隐藏属性的需要。
$('#myModal').on('hide.bs.modal', function () {
console.log('username : '+$("#modal-username").val());
console.log('result : '+$("#modal-result").val());
})
