单击以关闭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

回答

相关问题