當我的彈出框消失後，我想讓它在用戶從彈出框中單擊時消失，如何在彈出框後淡出彈出框

。當我的彈出框消失後，我想讓它在用戶從彈出框中單擊時消失，如何在彈出框後淡出彈出框

目前，它淡入淡出，然後再次消退。

jQuery的

function jsRef(){ 
    $('#footButton').click(function(){ 
    $('#refPop').fadeIn(1000); 
}); 

$('body').click(function(){ 
    $('#refPop').fadeOut(1000); 
});

HTML

<button id="footButton" onClick="jsRef()" type="button">References</button>

編輯** 問題中的文件是坐在通過PHP主要文件的底部包括。單擊主文件正文時彈出框應淡出

來源

2014-01-11 KyleHodgetts

將e.stopPropagation()添加到按鈕單擊或在打開彈出窗口後添加主體單擊事件。

像：

$('#footButton').click(function(){ 
    $('#refPop').fadeIn(1000); 

    $('body').click(function(){ 
     $('#refPop').fadeOut(1000); 
    }); 
});

或者：

$('#footButton').click(function(e){ 
    e.stopPropagation() 
    $('#refPop').fadeIn(1000); 
}); 
$('body').click(function(){ 
    $('#refPop').fadeOut(1000); 
});

我肯定會喜歡e.stopPropagation()解決方案。此外，您不需要按鈕的onClick屬性中的功能jsRef()。

來源

2014-01-11 17:45:35 lukasgeiter

想想使用jQuery .on（）方法代替.click（）（這是.on（'click'）的快捷方式）。 on（）允許您過濾元素並處理動態添加元素的事件偵聽器。見http://api.jquery.com/on/ – Flo

@Flo是的，我知道，但我不知道這應該如何解決OP問題。 – lukasgeiter

-1在這種情況下，防止事件冒泡並不是一種好的做法，如果不採用我建議的路線（http://stackoverflow.com/a/21065910/1095883），應該使用'on （）'事件處理程序按照@Flo的建議過濾元素。我也不認爲你的答案鼓勵良好的編碼風格，只是OP的快速修復。 –

我認爲你需要使用event.stopPropagation()以防止按鈕點擊事件佈雷了DOM樹：

$('#footButton').click(function(e){ 
    e.stopPropagation(); 
    $('#refPop').fadeIn(1000); 
});

你還缺少你jsRef功能的右括號：

function jsRef(){ 
    $('#footButton').click(function(){ 
     $('#refPop').fadeIn(1000); 
    }); 
} // <-- Here

來源

2014-01-11 17:46:27 Felix

問題是兩個事件都被觸發，導致模態顯示，然後立即隱藏。我會去了解這個以不同的方式，從你的語氣包裝分離的模式的內容，使模態淡出，當用戶點擊的模式包裝：

<button>Show modal</button> 
<div class="modal wrapper"></div> 
<div class="modal body">I'm a modal!</div>

的CoffeeScript（This isn't Javascript不過是一個「微小的語言編譯」爲 JS，希望你的想法）：

$('button').click -> 
    $('.modal').show() 

$('.modal.wrapper') .click -> 
    $('.modal').hide()

工作JSFiddle一些SCSS造型（再次，SCSS是不是CSS，它是一個的編譯成CSS語言）。

來源

2014-01-11 18:04:56

當我的彈出框消失後，我想讓它在用戶從彈出框中單擊時消失，如何在彈出框後淡出彈出框

回答

相關問題