模式引导问题

当使用代码尝试显示/隐藏引导模式时，我遇到了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

模式引导问题

回答

相关问题