Нажмите, чтобы закрыть 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

Как это может быть изменен, чтобы иметь Div замирание когда закрыто? –

@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'; 
};

Убедитесь, что элемент загружен перед добавлением события слушатель к элементу.

Вы также можете добавить атрибут onclick в вашем div для вызова функции, например:

<div onclick="hideThis(this)">

Тогда в сценарии:

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

источник

2016-11-18 02:50:59

Спасибо вам обоим. –

Нажмите, чтобы закрыть div

ответ

Смежные вопросы