从引导模式获取数据

我有一个注册页面触发一个模式窗口（使用Bootstrap），其中包含例如Facebook登录，我希望这个模式能够传回数据（错误，或者如果令牌/用户数据成功）到主窗口，这样我就可以填写相关的表单域并让用户完成注册过程（勾选“我同意条款和条件”框等）。从引导模式获取数据

我知道如何去做所有的事情，除了关于模式关闭时发回数据的位。有没有办法将数据从模态传递到模态关闭事件的主窗口？

编辑：这里是我所要完成的任务的可视化表示： flow

来源

2013-06-04 Davor

你是什么意思“送回”？你在“主窗口”（模态只是里面的一个元素）为什么不给页面上的隐藏输入或元素赋值，错误等？ – davidkonrad

模式实际上调用了我的认证控制器所在的不同URL。所以最后我在那里有一个php数组，我希望这个由jquery脚本使用，然后将相关的值分配给页面。这就是我所说的“送回”的意思：它基本上就像一个ajax调用，除非用户必须与模态窗口进行交互。 – Davor

类似http://sptalks.wordpress.com/2013/03/12/sharepoint-modal-dialog-passing-values-back-and-forth/，但如果可能的话使用Bootstrap模式。 – Davor

嘛。您可以访问主窗口和模态内容，因此基本上只需要在关闭之前从模态元素中复制内容。工作例子（两个代码块复制到两个文件了）：

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>

来源

2013-06-04 12:17:19 davidkonrad

非常感谢您花时间写出这样详细的答案！它帮助了很多。 – Davor

谢谢，这非常有帮助！ – Willz

不再起作用用它从未显示的隐藏类，替换为style =“display：none”; – Sergey

引导提供了以下内置事件处理来实现这一点：

show.bs.modal - 当模式将要被示出
shown.bs.modal发生 - 时发生模态被完全示出（后CSS转换已经完成）
hide.bs .modal - 当模式被完全隐藏（CSS后过渡已经完成）发生

对于你的情况，你可以使用隐藏 - 当模式即将被隐藏
hidden.bs.modal发生。 bs.modal事件来获取值点击按钮后的模态属性，隐藏模态之前。通过这种方式，davidkonrad给出的例子可以通过单个函数来实现，消除了对中间隐藏属性的需要。

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

来源

2016-06-26 09:05:53 Srini

从引导模式获取数据

回答

相关问题