2014-12-17 2 views
4

У меня есть форма с кнопкой отправки, которая будет перенаправляться на другой URL-адрес/сайт, когда кто-то нажимает на него. Например, форма находится на domain1.com и перенаправляет кого-то в домен2.comКак открыть Bootstrap modal при нажатии кнопки Submit, перенаправляющейся на другую страницу?

Страница, на которую я перенаправляю, иногда обрабатывает информацию, представленную в форме, поэтому я бы хотел открыть Bootstrap модальный, который говорит «Подождите, перенаправите» и останетесь открытым до тех пор, пока не будет загружен домен2.com.

Как бы я мог достичь этого?

Моя кнопка форма выглядит так:

<form action="http://www.domain2.com" method="post" id="my_form"> 
<input name="my_form_submit" type="submit" value="Send" class="btn btn-primary"> 
</form> 

Модальное как это:

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     Please wait, redirecting you ... 
     </div> 
    </div> 
    </div> 
</div> 

Чтобы запустить модальный, я должен добавить

data-toggle="modal" data-target="#myModal" 

К представить , но это приводит к тому, что кнопка отправки открывает модальную ссылку вместо ссылки.

+0

Почему вы не добавить bootply с кодом, где он показывает ошибку – user2975123

ответ

2

Возможное решение может быть с помощью кнопки, призывающей к яваскрипту функции (с использованием OnClick события), как представить и в этой функции что-то вроде:

$('#myModal').modal('show'); 
document.forms['my_form'].submit(); 
+0

не работает либо: ( – user1227914

+0

Этот простой bootply показывает вам, что это работает: http://www.bootply.com/X83OOE17Jr –

0

Попробуйте это:

$('#my_form').submit(function() { 
    if ($(this).valid()) { 
     $('#my_form').modal('show'); 
    } 
    else { 
     $('#my_form').modal('hide'); 
    } 
}); 
0

Но, если вы перенаправляете всю страницу, вы должны снова перезагрузить модальный. И вам нужно показать модальность перед загрузкой страницы.

Если вы используете или <div>, чтобы загрузить вашу защитную страницу, возможно, это возможно. Возможно, вы хотели бы использовать $.post() для обработки вашей формы кнопки.

Или, когда вы оставите вашу страницу, вы можете использовать unload() как этот код:

$(window).unload(function() { 
    alert("Bye now!"); 
    $('#myModal').modal('show'); 
}); 
+0

К сожалению, это не работает ... только модальные шоу :( – user1227914

+0

, чем пытаться добавить window.location = " url ", после $ ('# myModal'). modal ('show'); – ghostzali

Смежные вопросы