TA貢獻(xiàn)1851條經(jīng)驗 獲得超3個贊
我從評論中看到您可能已經(jīng)改變了您在申請中的方法，但為了它的學(xué)術(shù)價值 - 回答書面問題：
您可以使用.on()代替.bind() （自 jQuery 1.7 起已棄用）和.off()添加/刪除事件處理程序。
這將允許您根據(jù)需要打開/關(guān)閉該事件處理程序。
$("body").on('keyup', function(event) {
if (event.which == 83) {
$('#mdl').show();
$('body').off('keyup'); //the "s" will only work once
}
});
$('#mdl_closeX').click(function(){
$('#mdl').hide();
});
#mdl {
position: fixed;
top: 10%;
left: 25%;
background: wheat;
display:none;
}
#mdl_inner {padding:50px;}
#mdl_closeX{padding:5px;text-align:right;cursor:pointer;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="mdl">
<div id="mdl_closeX"> X </div>
<div id="mdl_inner">My Modal</div>
</div>
<h3>Click on the page body, then press the letter [ s ] </h3>
<p>The [s] binding will work only once. After closing the modal, pressing [s] will not open it again. </p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
這是一個修改后的示例，顯示了當(dāng)用戶在輸入字段中時如何關(guān)閉事件處理程序：
$("body").on('keyup', function(event) {
if (event.which == 83) {
$('#mdl').show();
}
});
$('#mdl_closeX').click(function(){
$('#mdl').hide();
});
$('input').focus(function(){
$('body').off('keyup'); //the "s" will only work once
});
$('input').blur(function(){
$("body").on('keyup', function(event) {
if (event.which == 83) {
$('#mdl').show();
$('body').off('keyup'); //the "s" will only work once
}
});
});
#mdl {
position: fixed;
top: 10%;
left: 25%;
background: wheat;
display:none;
}
#mdl_inner {padding:50px;}
#mdl_closeX{padding:5px;text-align:right;cursor:pointer;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="mdl">
<div id="mdl_closeX"> X </div>
<div id="mdl_inner">My Modal</div>
</div>
<h3>Click on the page body, then press the letter [ s ] </h3>
<p>The [s] binding will work any time the user is NOT inside an input field. </p>
<div>
When click in the input field, the "s" will be normalized. Next, click anywhere else on the body and the "s" will once again open the modal.
<input type="text" />
</div>
這是一個示例，顯示如何分配Ctrl s以打開搜索模式，而不僅僅是字母s。
因為“Ctrl+S”沒有成對的鍵碼，我們必須分別跟蹤每個鍵。所以我們使用一個全局變量來跟蹤 CTRL 鍵是否被按下，然后僅當(dāng) Ctrl 鍵被標(biāo)記為按下時才觀察“s”。
var ctrldn = false;
$("body").on('keydown', function(event) {
if (event.which == 17){
ctrldn = true;
}
});
$("body").on('keyup', function(event) {
if (event.which == 17){
ctrldn = false;
}
});
$("body").on('keydown', function(event) {
if (ctrldn && event.which == 83){
$('#mdl, #olay').show();
return false;
}
});
$('#mdl_closeX').click(function(){
$('#mdl, #olay').hide();
});
$('input').focus(function(){
ctrldn = false;
$('body').off('keyup'); //the "s" will only work once
});
$('input').blur(function(){
$("body").on('keyup', function(event) {
if (ctrldn && event.which == 83) {
$('#mdl').show();
$('body').off('keyup'); //the "s" will only work once
}
});
});
#olay{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background:black;
opacity: 0.6;
z-index:9998;
display:none;
}
#mdl {
position: fixed;
top: 10%;
left: 25%;
background: wheat;
z-index:9999;
display:none;
}
#mdl_inner {padding:50px;}
#mdl_closeX{padding:5px;text-align:right;cursor:pointer;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="olay"></div>
<div id="mdl">
<div id="mdl_closeX"> X </div>
<div id="mdl_inner">My Modal</div>
</div>
<h3>Click on the page body, then press [ Ctrl ] [ s ] </h3>
<p>[Ctrl] [s] will open the modal no matter where the user is, and will not interfere with the letter [s] by itself. </p>
<p><b>Note that it was necessary to use `return false` to suppress the default action of [Ctrl][s] within the browser</b></p>
<div>
When click in the input field, the "s" works like the letter "s", and [Ctrl] [s] will open the modal (even in the input field)
<input type="text" />
</div>
我還稍微調(diào)整了第三個演示，向您展示如何將其轉(zhuǎn)換為真正的模態(tài)——因此不需要 jQueryUI 或任何其他預(yù)制模態(tài)。你可以看看它們是如何在引擎蓋下工作的?；旧?，您需要一個覆蓋（只是一個覆蓋整個屏幕的 div），其 z-index 高于頁面上除模態(tài)對話框之外的任何其他內(nèi)容。然后你需要模態(tài)對話框結(jié)構(gòu)（只是一個普通的 div，里面有東西），它被定位（使用 z-index）以坐在疊加層的頂部。是的，就是這么簡單。
TA貢獻(xiàn)1943條經(jīng)驗 獲得超7個贊
你試過這樣的條件嗎？
if($('#search-modal').is(':visible')){
//do other things
}
舉報