2013-06-04 12 views
13

例えば、Facebookログインを含むモーダルウィンドウ(Bootstrapを使用)をトリガーするサインアップページがあります。このモーダルでデータを返すようにします(エラー、または成功した場合はトークン/ユーザーデータ)をメインウィンドウに追加して、関連するフォームフィールドを入力して、ユーザーが登録プロセスを完了できるようにします(「利用規約を承認します」など)。ブートストラップモードからデータを取得する

私はモーダルが閉じたときにデータを返すことについてのビットを除いて、すべてを行う方法を知っています。モーダルクローズイベントでモーダルからメインウィンドウにデータを渡す方法はありますか?

EDIT: flow

+0

「返送」とはどういう意味ですか?あなたは "メインウィンドウ"にあります(モーダルはその中の要素に過ぎません)なぜ、ページ自体の隠れた入力や要素に値やエラーなどを割り当てないのですか? – davidkonrad

+0

モーダルは実際に私の認証コントローラがある別のURLを呼び出しています。最終的にPHPの配列があり、これをjqueryスクリプトで使用して、関連する値をページに割り当てます。それは私が "返された"という意味です:基本的にajax呼び出しのようなものですが、ユーザーはモーダルウィンドウとのインターフェースをとる必要があります。 – Davor

+0

http://sptalks.wordpress.com/2013/03/12/sharepoint-modal-dialog-passing-values-back-and-forth/のようなものですが、可能であればBootstrapモーダルを使用してください。 – Davor

答えて

15

まあ:ここで私が達成したいものの視覚的な表現です。メインウィンドウとモーダルコンテンツの両方にアクセスできるので、基本的にモーダル要素からコンテンツをコピーしてから閉じる必要があります。 2つのコードブロックを2つのファイルにコピーする例:

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;?>'> 

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> 
+4

このような詳細な回答を書く時間をとってくれてありがとう!それは多くの助けとなりました。 – Davor

+0

ありがとう、とても助かりました! – Willz

+0

はそれ以上は動作しません hideクラスで表示されず、style = "display:none"に置き換えられました。 – Sergey

4

ブートストラップは、これを達成するために処理し、次の作り付けのイベントが用意されています

show.bs.modal - モーダルが
shown.bs.modal示されようとしているときに発生 - (CSSの遷移が完了した後)モーダルが完全に示されているときに発生
hide.bsあなたが非表示を使用することができ、あなたのケースでは、モーダルが完全に隠されているとき(CSSの遷移が完了した後)に発生し

から .modalは - モーダルが
hidden.bs.modalを非表示にされる場合に発生します。 bs.modalイベントの値を取得するボタンの後にモーダルが隠される前のモーダル属性。このようにして、davidkonradによって与えられた例は、中間の隠された属性の必要性を排除する単一の関数で実現できます。

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