从Bootstrap模式获取数据

Question

从Bootstrap模式获取数据

Dav*_*vor 14 jquery modal-dialog twitter-bootstrap

我有一个注册页面,触发一个模态窗口(使用Bootstrap),包含例如Facebook登录,我希望这个模式将数据(错误,或者如果成功的令牌/用户数据)传回主窗口,这样我就可以填写相关表单字段,让用户完成注册过程(勾选"我批准条款和条件"框等).

我知道如何做所有这些,除了关于模态关闭时发回数据的一点.有没有办法在模态关闭事件中将数据从模态传递到主窗口？

编辑:这是我想要完成的事物的直观表示:

Answer 1

dav*_*rad 17

好.您可以访问主窗口和模态内容,因此基本上您只需要在关闭之前复制模态元素中的内容.工作示例(将两个代码块复制到两个文件中):

auth.php(不知道你的auth如何工作,但也许你调用远程登录并获得一些结果,你可以存储在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;?>'>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

非常感谢您花时间写出这么详细的答案!它帮助了很多. (4认同)

Answer 2

Sri*_*ini 7

Bootstrap提供以下内置事件处理来实现此目的:

show.bs.modal - 当模态即将显示时发生
.bs.modal - 在完全显示模态时发生(在CSS转换完成后)
hide.bs.modal - 在模式即将被隐藏时发生
hidden.bs.modal - 在模式完全隐藏时(CSS转换完成后)发生

对于您的情况,您可以使用hide.bs.modal事件在单击按钮之后和隐藏模态之前获取模态属性的值.通过这种方式,davidkonrad给出的示例可以在单个函数中实现,从而消除了对中间隐藏属性的需要.

    $('#myModal').on('hide.bs.modal', function () {    
    console.log('username : '+$("#modal-username").val());    
    console.log('result : '+$("#modal-result").val());    
})

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，5 月前
查看次数：	38195 次
最近记录：	9 年，5 月前