如何在单击重定向到其他页面的“提交”按钮时打开引导模式 - How to open a Bootstrap modal when a Submit button redirecting to a different page is clicked?

How to open a Bootstrap modal when a Submit button redirecting to a different page is clicked?

我有一个带有提交按钮的表单，当有人点击它时，它会定向到不同的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"

到提交按钮

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

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

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

试试这个：

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

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

如果您使用像<iframe>或<div>来加载您的 secound 页面，也许这是可能的。也许您想使用$.post()来处理按钮窗体。

或者，当您离开页面时，您可以使用如下代码unload()：

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