通知バーがクリックで解除されない

Question

ページのフッターにプライバシーポリシー通知バーを作成し、新しい訪問者のみを表示しようとしています。受諾のクリックでその通知を却下する。今すぐバーがページの一番下に固定されて表示されていますが、通知バーをクリックして閉じることができません。

<span class="banner tracking-banner p-t-1"> 
<div class="container"> 
<div class="row"> 
    <div class="col-sm-10 text-left m-b-1"> 
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>. 
    </div> 
    <div class="col-sm-2 m-b-1"> 
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button> 
    </div> 
</div> 
</div> 
</span> 

JS

$(".banner").fadeIn("slow").append(".container"); 
$(".dismiss").click(function(){ 
    $(".banner").fadeOut("slow"); 
}); 

まだ学んjsがそう私と一緒に裸してください。これを適切に機能させるためのより優れた選択肢を開くため、説明も役立ちます。ありがとう！

Answer 1

文書レディ機能

$(document).ready(function(){ 
 

 
$(".banner").fadeIn("slow").append(".container"); 
 
$(".dismiss").click(function(){ 
 
    $(".banner").fadeOut("slow"); 
 
}); 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="banner tracking-banner p-t-1"> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-sm-10 text-left m-b-1"> 
 
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>. 
 
    </div> 
 
    <div class="col-sm-2 m-b-1"> 
 
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button> 
 
    </div> 
 
</div> 
 
</div> 
 
</span>

Answer 2

変更DIVするためにあなたのスパン内のコードをラップしますか？あなたのfadeOutを機能させる。

<div class="banner tracking-banner p-t-1"> 
<div class="container"> 
<div class="row"> 
    <div class="col-sm-10 text-left m-b-1"> 
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>.</div> 
    <div class="col-sm-2 m-b-1"> 
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button> 
    </div> 
</div> 
</div> 
</div>