Bootstrap Problem mit Modal

Question

Ich habe ein Problem mit Bootstrap Modal beim Versuch, es mit Code anzuzeigen/auszublenden. Wenn wir Text mit mehr als 3 Zeichen eingeben und einmal die Eingabetaste drücken, wird das Modal angezeigt und verschwindet dann wie vorgesehen. Wenn wir jedoch weiterhin die Eingabetaste drücken, wird der Bildschirm schwarz.

Ich habe andere Beiträge mit diesem Problem gesehen und alle von ihnen schlagen vor, data-keyboard="false" zu verwenden, aber das funktioniert nicht in meinem Fall. Könnte jemand bitte helfen?

UPDATE

Der Code-Schnipsel mit Arbeitslösung wird nun in der Antwort gepostet aktualisiert.

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

Statt die globale Variable zu verwenden isLoading Ich schlage vor, zu prüfen, ob die modal-Kulisse vor dem Öffnen des modalen sichtbar ist:

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

Das Snippet:

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