我有一个注册页面,它触发一个模态窗口(使用 Bootstrap ),其中包含例如 Facebook 登录,我希望此模态将数据(错误,或者如果成功,则 token /用户数据)传回主窗口这样我就可以填写相关的表单字段并让用户完成注册过程(勾选“我批准条款和条件”框等)。
除了模式关闭时发送回数据的部分之外,我知道如何执行所有操作。有没有办法在模态关闭事件上将数据从模态传递到主窗口?
编辑:这是我想要完成的任务的直观表示:
最佳答案
嗯。您可以访问主窗口和模式内容,因此基本上您只需在关闭之前从模式元素复制内容即可。工作示例(将两个代码块复制到两个文件中):
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,主窗口
<!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>
关于jquery - 从 Bootstrap 模式获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16915278/