Question

我正在尝试为一个项目设置模态，在这个项目中，客户可以更新自己喜欢的球队，出生城市和他们的体型。在没有输入一些信息时，我希望将错误消息返回给他们，但是当模态关闭时，我希望此消息消失。我正在使用bootstrap作为模态，是否有可能因为页面没有刷新而导致错误消息无法清除，或者我的代码中是否出错？

模态标记：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-   labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <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" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="city">You were born in:</label>
                        <input type="text" class="form-control" id="city"  placeholder="city">

                    </div>
                    <div class="form-group">
                        <label for="favorite_team">Favorite team:</label>
                        <input type="text" class="form-control" id="favoriteTeam"  placeholder="favorite team">

                    </div>
                    <div class="form-group">
                        <label for="size">size:</label>
                        <input type="text" class="form-control" id="size"  placeholder="size">

                    </div>

                    <div class="alert alert-success" id="successAlert" role="alert"  style="display: none"></div>
                    <div class="alert alert-danger" id="updateFail" style="display:none" >                  </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onClick="closed()"  >Close</button>
                <button type="button" class="btn btn-primary" id="saveBtn"  onClick="Changes()">Save changes</button>
            </div>
        </div>
    </div>
</div>

脚本：

function Changes() {
    $.ajax({
        url: "../php_parsers/update_parse.php",
        type: "POST",
        data: {
            city: $("#city").val(),
            favoriteTeam: $("#favoriteTeam").val(),
            size: $("#size").val()
        }
    }).done(function (result) {
        if (result == "success") {
            $("#successAlert").html(result).show();
        } else {
            $("#updateFail").html(result).show();
        }
    })
}

function closed() {
    $("#updateFail").style.display = "none";
    $("#successAlert").style.display = "none";
}

Answer 1

您应该在模式上使用Bootstrap's callbacks，而不是在关闭按钮上单击处理程序。如果有人遇到逃跑或点击外面关闭怎么办？

$('#myModal').on('hide.bs.modal', function (e) {
    $('#updateFail, #successAlert').hide();
});

您的功能可能无效，因为运行时模态已隐藏。 jQuery有时无法对隐藏元素进行操作。在模态实际隐藏之前，Bootstrap的on.hide()方法就会运行。

请注意，我已将您的选择器组合在一起（可能改为使用公共类）并转换为更清晰的hide()方法。

Answer 2

您可以尝试使用您的Changes（）函数：

function Changes(){
   $.ajax({
   url: "../php_parsers/update_parse.php",
   type: "POST",
   data: { 
      city:         $("#city").val(), 
      favoriteTeam: $("#favoriteTeam").val(), 
      size:         $("#size").val()
   }
   }).done(function(result) {
      //Hide Previous messages
      $("#successAlert, #updateFail").hide();
      if (result == "success") {
         $("#successAlert").html(result).show();
      } else {
         $("#updateFail").html(result).show();
      }
   })
}

Answer 3

Нou可以尝试如下所示的关闭功能：

 function closed(){
     $("#updateFail").html('').hide();
     $("#successAlert").style.display="none";
 }

即使关闭后，错误消息也无法从Bootstrap模式中清除

3 个答案: