單擊以關閉div

我正在使用廣告區塊檢測器腳本，並希望使其更方便用戶。使用以下內容，我需要哪些腳本/代碼才能讓用戶單擊div來關閉它？單擊以關閉div

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <title>Detect Adblock - Most effective way to detect ad blockers</title> 
    </head> 
    <body> 

    <style> 
    #iQGIuEqKgDvV { 
    display: none; 
    margin-bottom: 30px; 
    padding: 20px 10px; 
    background: #D30000; 
    text-align: center; 
    font-weight: bold; 
    color: #fff; 
    border-radius: 5px; 
    } 
    </style> 

    <div id="iQGIuEqKgDvV"> 
     Our website is made possible by displaying online advertisements to our visitors.<br> 
     Please consider supporting us by disabling your ad blocker. 
    </div> 

    <script src="/ads.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

    if(!document.getElementById('Ad-Detect-js')){ 
     document.getElementById('iQGIuEqKgDvV').style.display='block'; 
    } 

    </script> 

    </body> 
    </html>

來源

2016-11-18 Derrick Stewart

這個解決方案如何。希望能幫助到你！

var slideSource = document.getElementById('slideSource'); 
 
document.getElementById('handle').onclick = function(){ 
 
    if(!document.getElementById('Ad-Detect-js')){ 
 
    \t slideSource.className = slideSource.className ? 'fade' : 'fade'; 
 
    } 
 
}

div#slideSource { 
 
opacity:1; 
 
transition: opacity 1s; 
 
display: block; 
 
    margin-bottom: 30px; 
 
    padding: 20px 10px; 
 
    background: #D30000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    border-radius: 5px; 
 
} 
 

 
div#slideSource.fade { 
 
opacity:0; 
 
}

<div id="handle"> 
 
    <div id="slideSource"> Our website is made possible by displaying online advertisements to our visitors.<br> 
 
     Please consider supporting us by disabling your ad blocker. 
 
     </div> 
 
    </div>

來源

2016-11-18 02:44:38 HenryDev

怎樣纔可以修改爲具有股利褪色什麼時候關閉？ –

@DerrickStewart我剛剛更新了我的答案，以便在關閉時淡出 – HenryDev

由於div下面有內容，有沒有一種方法可以使div完全消失，以便下面的內容在其位置上移？截至目前，有一個差距是div的高度，因爲它只是隱藏的。 –

添加事件偵聽到div，像這樣：

document.getElementById("iQGIuEqKgDvV").addEventListener('click',function(){ 
    //Your code goes here 
    //'this' in this function block represents the current element 
    this.style.display = 'none'; 
});

或本：

document.getElementById("iQGIuEqKgDvV").onclick = function(){ 
    //Your code goes here 
    //'this' in this function block represents the current element 
    this.style.display = 'none'; 
};

確保元素加載在添加事件之前聆聽元素。

你也可以在你的div添加onclick屬性調用一個函數，就像這樣：

<div onclick="hideThis(this)">

然後在你的腳本：

function hideThis(element){ 
    element.style.display = 'none'; 
}

來源

2016-11-18 02:50:59

謝謝你們倆。 –

單擊以關閉div

回答

相關問題