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)">

次に、スクリプト内：

divのフェードを持つように変更することができますどのように

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

出典

2016-11-18 02:50:59

ありがとうございます。 –

divを閉じるにはクリックしてください

答えて

関連する問題