Question

我是javascript /编程的新手，在表单提交返回警报成功消息后，我无法尝试关闭引导模式。我想要发生的是用户：

提交嵌入模态的表单。
如果成功提交，将显示警报成功消息。
如果显示警报成功，我希望关闭模态窗口
（可选）我想重置表单

我尝试过使用javascript hide功能，但没有运气。

$(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>

Answer 1

这个答案只是一个例子，给出了完整的想法如何实现，OP提出了什么问题。

<强> 1。提交嵌入模态中的表单。

来自

的模态

<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>

由你决定如果你把<div id="thanks"></div>置于模态体内，但我不推荐它，因为你要求的下一步是自动关闭模态，所以成功消息只会显示几秒钟，模态关闭。

第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（不使用bootstrap）关闭modal时应该像

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

Answer 2

你可以睡一段时间然后重定向如下。

这应该在Luanching模式之后执行。

创建一个javascript函数，如下所示

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

然后睡眠和重定向（睡觉只是为了显示成功警报）

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

的问候，安东尼·维尔森

如何关闭引导模式并在显示成功警报后重定向

2 个答案: