【问题标题】:How to close a bootstrap modal and redirect after success-alert displayed如何在成功警报显示后关闭引导模式并重定向
【发布时间】:2015-09-02 04:35:36
【问题描述】:

我是 javascript/编程新手,在表单提交返回并显示警报成功消息后尝试关闭引导模式时遇到问题。我希望用户能够:

  1. 提交嵌入模式的表单。
  2. 如果成功提交,将显示警报成功消息。
  3. 如果显示警报成功,我希望关闭模式窗口
  4. (可选)我想重置表单

我尝试过使用 javascript 隐藏功能,但没有成功。

$(document).ready(function(){
  if($('#alert-success'))
  {
   $('#myModal').hide();
  } 

});

任何帮助将不胜感激!

这是我正在尝试创建的示例代码(注意:我已包含虚拟代码,因为我无权在此处使用我的公司代码)。也可以在此处找到以下代码的链接:http://jsbin.com/pidizetila/edit?html,output

<!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

    <!-- Modal content-->


     <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;      </button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <div class="alert alert-success">
      <strong>Success!</strong> Indicates a successful or positive action.
    </div>
          </div>

        </div>

      </div>
    </div> 

【问题讨论】:

  • 最好在body标签的末尾加载jquerybootstrap.min.js。因为最佳实践遵循这条规则。
  • 您的代码中没有form
  • 这只是一个示例——就像显示此警报时关闭模式一样。是否可以仅根据警报关闭模态?

标签: twitter-bootstrap modal-dialog


【解决方案1】:

这个答案只是一个例子,让 COMPLETE 知道如何实现,OP 提出的问题。

1.提交嵌入模式中的表单。

带有 From 的模态

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title">Modal Form</h4>
            </div>
            <form id="myform" class="form-horizontal" role="form" method="POST">
                <div class="modal-body">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label class="control-label popup-label">First Name</label>
                            <input required type="text" class="form-control" name="firstname" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <label class="control-label popup-label">Last Name</label>
                            <input required type="text" class="form-control" name="lastname" value="">
                        </div>
                    </div>
                    <div id="error">
                        <div class="alert alert-danger"> <strong>Error!</strong> There Are Too Many Errors</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="submitForm">Submit</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="reset">Cancel / Clear</button>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
<div id="thanks"></div>

Ajax 提交表单

 $("#submitForm").click(function () {
     $.ajax({
         type: "POST",
         url: "process.php",
         data: $('#myform').serialize(),
         success: function (msg) {
             $("#thanks").html(msg)
             $("#myModal").modal('hide');
         },
         error: function () {
             $("#error").show();
         }
     });
 });

假设服务器端语言是 PHP

<?php
    if (isset($_POST['firstname'])) {
        $firstname = strip_tags($_POST['firstname']);
        $lastname = strip_tags($_POST['lastname']);
        //Do what ever you like to do next
        echo "<div class=\"alert alert-success\"><strong>Success!</strong> This Is Success Thanks Message. If everything go exactly as Planned.</div>";
    }
?>

至此,表单值已发布。

2。如果提交成功,将显示警报成功消息。

 success: function (msg) {
     $("#thanks").html(msg)
 },

Ajax调用成功后,会显示成功消息;

 <div id="thanks"></div>

这取决于你如果你想把&lt;div id="thanks"&gt;&lt;/div&gt; 放在模态正文中,但我不会推荐它,因为你要求的下一步是自动关闭模态,所以成功消息只会显示几秒钟,模态就会关闭.

3.如果显示警报成功,我想关闭模式窗口

从 Ajax 成功调用后,这将自动关闭模式

 success: function (msg) {
     $("#thanks").html(msg)
     $("#myModal").modal('hide');
 },

4. (可选)我想重置表单

Ajax 调用成功后,一旦模态框关闭,如果模态框再次打开,以下代码将重置表单输入。

$('#myModal').on('hidden.bs.modal', function(){
    //$(this).removeData('bs.modal');
    $(':input','#myform').val("");
});

可选地,如果用户将值放入表单并关闭模态而不发布它,如果用户再次打开模态,以下代码也可以重置表单,cancel/clear 按钮的 id reset 与以下代码绑定。

    $("#reset").click(function () {
        $(':input','#myform').val("");
    });

最后一件事,确保完整的 JS 代码已经准备好 DOM

$(document).ready(function () {
   //Put JS code here
});

Fiddle Example

在你的尝试中;

$(document).ready(function(){
    if($('#alert-success')){
        $('#myModal').hide(); <<<<----This is wrong
    } 
});

当使用 jQuery(而不是引导程序)关闭模式时应该像

$('#myModal').hide('hide'); <<<<----Correct

【讨论】:

    【解决方案2】:

    你可以睡一会儿然后重定向如下。

    这个应该在乱跳modal之后执行。

    如下创建一个javascript函数

    function sleep (time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    }
    

    然后休眠并重定向(休眠只是为了显示成功警报)

                sleep(3000).then(() => {window.location.href = 'index.jsp';});
    

    问候, 安东尼·维尔森

    【讨论】:

      猜你喜欢
      • 2020-07-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多