单击重定向到不同页面的提交按钮时如何打开引导模式？

Question

我有一个带有提交按钮的表单，当有人点击它时，它会指向不同的 URL/网站。例如，表单在 domain1.com 上，它会将某人重定向到 domain2.com

我要重定向到的页面有时处理表单中提交的信息的速度很慢，所以我想打开一个引导模式，上面写着“请稍候，重定向”，并且在 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"

到提交按钮，但这会导致提交按钮打开模式而不是链接。

Answer 1

一种可能的解决方案是使用调用 javascript 函数（使用 onclick 事件）的按钮作为提交，并在该函数中使用如下内容：

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

Answer 2

试试这个：

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

Answer 3

但是，如果您重定向整个页面，则必须重新加载模式。而且您需要在页面加载完成之前显示模态。

如果您使用 <iframe> 或 <div> 来加载您的第二个页面，那可能是可行的。也许您想使用$.post() 来处理您的按钮表单。

或者，当你离开你的页面时，你可以使用unload() 像这样的代码：

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