模式引導問題

當使用代碼嘗試顯示/隱藏引導模式時，我遇到了Bootstrap模式問題。當我們輸入超過3個字符的文本並按下Enter鍵時，模式會按預期顯示然後消失。但是，如果我們繼續按Enter鍵，屏幕會變黑。模式引導問題

我已經看到其他職位與這個問題，他們都建議使用data-keyboard="false"，但這不適用於我的情況。有人可以幫忙嗎？

UPDATE

的代碼片段，現在更新與張貼在回答工作液。

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

來源

2017-08-28 Learner

這是狀態管理的常見問題;你觸發'.modal（「show」）;'多次，所以你需要設置和跟蹤一個變量來防止這個;例如'var isLoading = false;'，如果設置爲'true'，將阻止執行'showLoading（）'。 –

@TimLewis - 我按照建議添加了一個變量，但問題依然存在。請參閱我的更新代碼。 – Learner

這種情況可能發生得太快;在打開和關閉之間沒有時間，所以您可能需要爲'.on（「shown.bs.modal」）'和'.on（「hidden.bs.modal」）'添加處理程序以正確處理此問題。 –

而是使用全局變量isLoading我建議以測試是否模式，背景可見開模前：

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>

來源

2017-08-28 14:50:02 gaetanoM

謝謝，這個工程，我已經在我的代碼片段更新它。 :) – Learner

@學習者不客氣 – gaetanoM

模式引導問題

回答

相關問題