Question

Bootstrap 中的 Modal 问题

2017-08-28

79

javascript jquery twitter-bootstrap

当我尝试使用代码显示/隐藏 Bootstrap Modal 时，出现了问题。当我们输入超过 3 个字符的文本并按一次 Enter 键时，模式会按预期显示然后消失。但是，如果我们继续按 Enter 键，屏幕就会变黑。

我看过其他有关此问题的帖子，它们都建议使用 data-keyboard="false" ，但这对我而言不起作用。有人可以帮忙吗？

更新

代码片段现已更新，并在答案中发布了有效的解决方案。

$(document).ready(function(){

  $("#txtSearch").keydown(function(event){
    if($.trim($(this).val()) != "" && $(this).val().length > 3 && event.which == 13 ){
      showLoading();

      //Some Code
      hideLoading();
  }
  });
  
});

function showLoading(){
  if(!$('.modal-backdrop').is(':visible')){
    $("#myModal").modal("show");
  }
}

function hideLoading(){
  $("#myModal").modal("hide");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input id="txtSearch" />
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
<h1 style="color:white">Loading...</h1>
</div>

Answer 1

我建议不要使用全局变量 isLoading ，而是在打开模态框之前测试 modal-backdrop 是否可见：

if (!$('.modal-backdrop').is(':visible')) {
    $("#myModal").modal("show");
    console.log('show');
}

代码片段：

$(document).ready(function () {
    $("#txtSearch").keydown(function (event) {
        if ($.trim($(this).val()) != "" && $(this).val().length > 3 && event.which == 13) {
            showLoading();
            setTimeout(function() {
                hideLoading();
            }, 1000);
            //Some Code
            //hideLoading();
        }
    });

});

function showLoading() {
    if (!$('.modal-backdrop').is(':visible')) {
        $("#myModal").modal("show");
        console.log('show');
    }
}

function hideLoading() {
    $("#myModal").modal("hide");
    console.log('hide');
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<input id="txtSearch"/>

<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
    <h1 style="color:white">Loading...</h1>
</div>