Question

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

我已经看到有关此问题的其他帖子，并且所有帖子都建议使用data-keyboard="false"，但这在我的案例中并不起作用。有人可以帮忙吗？

更新

现在，代码段已更新，并在回答中发布了工作解决方案。

＆＃13;

$(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");
}

＆＃13;

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

＆＃13;

Answer 1

而是使用全局变量 isLoading 我建议在打开模态之前测试模态背景是否可见：

(mousePosition.origin - lastMousePosition.origin)

摘录：

＆＃13;

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

＆＃13;

$(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');
}

＆＃13;

Modal的Bootstrap问题

1 个答案: