Как открыть модал Bootstrap при нажатии кнопки «Отправить», перенаправляющей на другую страницу?

Question

Как открыть модал Bootstrap при нажатии кнопки «Отправить», перенаправляющей на другую страницу?

У меня есть форма с кнопкой отправки, которая будет перенаправлять на другой URL / веб-сайт, когда кто-то нажимает на нее. Например, форма находится на domain1.com, и она будет перенаправлять кого-то на domain2.com

Страница, на которую я перенаправляю, иногда медленно обрабатывает информацию, представленную в форме, поэтому я хотел бы открыть модал Bootstrap с надписью «Пожалуйста, подождите, перенаправление» и будет оставаться открытым до загрузки domain2.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"

Для кнопки отправки, но это вызывает кнопку отправки, чтобы открыть модальные вместо ссылки.

4

jquery modal-dialog php twitter-bootstrap

Решение

Другие решения

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

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

0

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

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

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

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

0

Источник

Accepted Answer

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

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

2