Javascript閉じるボタンが機能しない

-3

私は画面の下部に表示されるフローティング広告を作成しようとしています。誰かが「閉じる」ボタンをクリックすると、このアドオンは60秒間表示されなくなります。私はこのコードを書いていますが、動作しません。Javascript閉じるボタンが機能しない

<script type='text/javascript'> 
    $(document).ready(function(){ 
    $('#close-fixedbox').on('click', function() { 
     alert("Hello!"); 
    $('#fixedbox').hide(90); 
     }); 
    }); 
    </script> 

    <div id='fixedbox' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'> 

    <div> 

    <a id='close-fixedbox' onclick='document.getElementById('fixedbox').style.display = 'none';' style='cursor:pointer;'> 

    <img alt='close' src='http://www.latestbdnews.com/wp-content/uploads/2016/07/btn_close.gif' title='close button' style='vertical-align:center;'/> 
    </a> 
    </div> 


    <div style='text-align:center;display:block;max-width:320px;height:auto;overflow:hidden;margin:auto'> 


    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<!-- Mobile leaderboard --> 
     <ins class="adsbygoogle" 
     style="display:inline-block;width:320px;height:50px" 
     data-ad-client="ca-pub-XXXXXXXXXXXXX" 
     data-ad-slot="XXXXXXXXXX" 
     data-language="en"> 
     </ins> 
    <script> 
     (adsbygoogle = window.adsbygoogle || []).push({}); 
    </script> 
    </div> 
    </div>

出典

2016-07-17 Khaled Md Tuhidul Hossain

これはおそらくGoogleのサービス利用規約に違反している可能性があります。 – adeneo

問題は、スクリプトの内容についてonclick属性とを包むため'を使用することです。そのうちの1つを二重引用符（"）に置き換えてください。あなたが追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type='text/javascript'> 
 
    $(document).ready(function(){ 
 
    $('#close-fixedbox').on('click', function() { 
 
     alert("Hello!"); 
 
     $('#fixedbox').hide(90); 
 
    }); 
 
    }); 
 
</script> 
 

 
<div id='fixedbox' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'> 
 
    <div> 
 
    <a id='close-fixedbox' onclick="document.getElementById('fixedbox').style.display = 'none';" style='cursor:pointer;'> 
 
     <img alt='close' src='http://www.latestbdnews.com/wp-content/uploads/2016/07/btn_close.gif' title='close button' style='vertical-align:center;'/> 
 
    </a> 
 
    </div> 
 
    <div style='text-align:center;display:block;max-width:320px;height:auto;overflow:hidden;margin:auto'> 
 
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
 
    <!-- Mobile leaderboard --> 
 
    <ins class="adsbygoogle" 
 
     style="display:inline-block;width:320px;height:50px" 
 
     data-ad-client="ca-pub-XXXXXXXXXXXXX" 
 
     data-ad-slot="XXXXXXXXXX" 
 
     data-language="en"> 
 
    </ins> 
 
    <script> 
 
     (adsbygoogle = window.adsbygoogle || []).push({}); 
 
    </script> 
 
    </div> 
 
</div>

出典

2016-07-17 13:44:11

Khaled、これを試しましたか？ –

jqueryのは、両方のjQueryとJavaScriptを使用して閉じるボタンをトリガあなたの例では冗長なコードを持っているproblem.Otherwiseを解決します。その後、すなわち""と''

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type='text/javascript'> 
 
    $(document).ready(function(){ 
 
\t $('#close-fixedbox').on('click', function() { 
 
     alert("Hello!"); 
 
\t $('#fixedbox').hide(90); 
 
\t \t }); 
 
\t }); 
 
    </script> 
 
\t 
 
    <div id='fixedbox' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'> 
 

 
    <div> 
 

 
\t <a id='close-fixedbox' style='cursor:pointer;'> 
 

 
\t <img alt='close' src='http://www.latestbdnews.com/wp-content/uploads/2016/07/btn_close.gif' title='close button' style='vertical-align:center;'/> 
 
    </a> 
 
    </div> 
 

 

 
    <div style='text-align:center;display:block;max-width:320px;height:auto;overflow:hidden;margin:auto'> 
 
    
 
\t 
 
\t <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
 
<!-- Mobile leaderboard --> 
 
     <ins class="adsbygoogle" 
 
     style="display:inline-block;width:320px;height:50px" 
 
     data-ad-client="ca-pub-XXXXXXXXXXXXX" 
 
     data-ad-slot="XXXXXXXXXX" 
 
     data-language="en"> 
 
     </ins> 
 
    <script> 
 
     (adsbygoogle = window.adsbygoogle || []).push({}); 
 
    </script> 
 
    </div> 
 
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
    \t 
 
     <div id='fixedbox' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'> 
 

 
     <div> 
 

 
    \t <a id='close-fixedbox' onclick="document.getElementById('fixedbox').style.display='none'" style='cursor:pointer;'> 
 

 
    \t <img alt='close' src='http://www.latestbdnews.com/wp-content/uploads/2016/07/btn_close.gif' title='close button' style='vertical-align:center;'/> 
 
     </a> 
 
     </div> 
 

 

 
     <div style='text-align:center;display:block;max-width:320px;height:auto;overflow:hidden;margin:auto'> 
 
     
 
    \t 
 
    \t <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
 
    <!-- Mobile leaderboard --> 
 
      <ins class="adsbygoogle" 
 
      style="display:inline-block;width:320px;height:50px" 
 
      data-ad-client="ca-pub-XXXXXXXXXXXXX" 
 
      data-ad-slot="XXXXXXXXXX" 
 
      data-language="en"> 
 
      </ins> 
 
     <script> 
 
      (adsbygoogle = window.adsbygoogle || []).push({}); 
 
     </script> 
 
     </div> 
 
     </div>

の適切な組み合わせを使用して、適切な引用符でアクションを囲むことを忘れないでくださいのJavascriptのonClickを使用して、アールone.Ifいずれかを使用します。

出典

2016-07-17 13:44:22

jQueryはすでにコードに含まれています。 –

@JacquesMarais答えを書きましたが、jqueryが見つかりませんでした。コードを編集している人が私の答えを書いた後にそれを加えた –

ああ、私はそれを見ていない、ごめんなさい。 –

アトリビュートに一重引用符が含まれていると、JavaScriptで一重引用符を使用できません：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type='text/javascript'> 
 
    $(document).ready(function(){ 
 
    $('#close-fixedbox').on('click', function() { 
 
     alert("Hello!"); 
 
     $('#fixedbox').hide(90); 
 
    }); 
 
    }); 
 
</script> 
 

 
<div id='fixedbox' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'> 
 
    <div> 
 
    <a id='close-fixedbox' onclick="document.getElementById('fixedbox').style.display = 'none';" style='cursor:pointer;'> 
 

 
     <img alt='close' src='http://www.latestbdnews.com/wp-content/uploads/2016/07/btn_close.gif' title='close button' style='vertical-align:center;'/> 
 
    </a> 
 
    </div> 
 
    <div style='text-align:center;display:block;max-width:320px;height:auto;overflow:hidden;margin:auto'> 
 
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
 
    <!-- Mobile leaderboard --> 
 
    <ins class="adsbygoogle" 
 
     style="display:inline-block;width:320px;height:50px" 
 
     data-ad-client="ca-pub-XXXXXXXXXXXXX" 
 
     data-ad-slot="XXXXXXXXXX" 
 
     data-language="en"> 
 
    </ins> 
 
    <script> 
 
     (adsbygoogle = window.adsbygoogle || []).push({}); 
 
    </script> 
 
    </div> 
 
</div>

出典

2016-07-17 13:45:21

JavaScriptエラーの原因となったコード、あなたがアンカータグからインラインイベントを削除する必要がある、それは以下のように見えるはずです：

jQueryの非表示機能が設定されます

<a id='close-fixedbox' style='cursor:pointer;'>

を表示属性はなしになるので、明示的に設定する必要はありません。

出典

2016-07-17 13:57:36

-1

ありがとう、皆様お返事ありがとうございます。私はそれを自分で解決しました。私はちょうどそのコードの上にjqueryリンクを追加し、それは動作を開始します。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

出典

2016-07-17 19:17:24

jQueryの質問をするときは、通常、少なくともすでにjQueryライブラリが含まれていると想定しています。 – Sparky

@ Sparky私はextreamly申し訳ありません:(それは大きなミスでした –

Javascript閉じるボタンが機能しない

答えて

関連する問題