Question

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

我重定向到的页面有时会慢慢处理表单中提交的信息，所以我想打开一个Bootstrap模式，说明＆＃34;请等待，重定向＆＃34;并将保持开放，直到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'); 
});

单击“提交”按钮重定向到其他页面时如何打开Bootstrap模式？

3 个答案: