twitter-bootstrap - 显示成功警报后如何关闭 Bootstrap 模式并重定向

Question

我是 javascript/编程的新手，在表单提交返回成功警报消息后，我无法尝试关闭 Bootstrap 模式。我希望用户能够:

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> 

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与以下代码绑定(bind)。

    $("#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)关闭模态时应该像

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