Twitter bootstrap 显示成功警报后如何关闭引导模式和重定向

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

提交模型中嵌入的表单

如果成功提交，将显示警报成功消息

如果显示警报成功，我希望关闭模式窗口

（可选）我想重置表单

我尝试过使用javascript隐藏函数，但没有成功

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

});

任何帮助都将不胜感激

下面是我试图创建的示例代码（注意：我已经包含了伪代码，因为我没有在这里使用公司代码的权限）。以下代码的链接也可在此处找到：

开放模态
&时代；
模态头
成功表示成功或积极的行动。

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

1。提交模式中嵌入的表格。

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

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

假设服务器端语言是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>";
    }
?>

Ajax调用成功后，将显示成功消息

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

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
});

在你的尝试中

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

$（文档）.ready（函数（）{
如果（$（“#警报成功”））{
$（'#myModal'）.hide（）；您可以睡一会儿，然后重定向，如下所示

这应该在Luanching模式之后执行

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

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

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

问候,，
Antony Vilson
最好在
正文
标记的末尾加载
jquery
和
bootstrap.min.js
。因为最佳实践遵守此规则。代码中没有
表单
。这只是一个示例——就像在显示此警报时关闭模式一样。是否可以仅根据警报关闭模式I？
$(document).ready(function () {
   //Put JS code here
});

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

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

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

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