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

Question

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

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

我尝试过使用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>

这取决于你如果你把wala放在<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按钮具有reset与以下代码绑定的id .

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

最后一点,确保完整的JS代码将为DOM准​​备好

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

小提琴示例

在你的尝试;

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

当使用jQuery(不使用bootstrap)关闭modal应该是这样的

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