從引導模式獲取數據

我有一個註冊頁面觸發一個模式窗口（使用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

從引導模式獲取數據

回答

相關問題