Получение данных из модального модуля Bootstrap

У меня есть страница регистрации, которая запускает модальное окно (используя Bootstrap), содержащий, например, логин Facebook, и я хочу, чтобы этот модальный пересылать данные (ошибки или, если удастся данные токена/пользователя) в главное окно, чтобы я мог заполнить соответствующие поля формы и позволить пользователю завершить процесс регистрации (отметьте поле "Я согласен с условиями" и т.д.),.

Я знаю, как сделать все это, кроме бит об отправке данных назад, когда модальный закрывается. Есть ли способ передать данные из модального в основное окно модального события закрытия?

EDIT: вот визуальное представление того, что я хочу выполнить: flow

Ответы

Ответ 1

Ну. У вас есть доступ как к главному окну, так и к модальному контенту, поэтому вам просто нужно скопировать содержимое из модальных элементов перед закрытием. Рабочий пример (скопируйте два кодовых блока в два файла):

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>

Ответ 2

Для достижения этой цели 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());    
})