← 動的パーツギャラリーへ戻る

パーツ番号 01-02-07 ・ JavaScript使用

Cookie同意バナー

下部からスライドインするCookie同意バー。同意/拒否のいずれかを押すと下へ消えます。プライバシー対応が必要なサイトで活用できます(クリックで動作)。

clickjs

プレビュー

ソースコード

HTML

<div class="d01-02-07-page">
          <div class="d01-02-07-block" style="width:80%"></div>
          <div class="d01-02-07-block" style="width:60%"></div>
        </div>
        <div class="d01-02-07-bar">
          <p class="d01-02-07-txt">当サイトは体験向上のためCookieを使用します。</p>
          <div class="d01-02-07-acts">
            <button class="d01-02-07-b d01-02-07-deny" type="button">拒否</button>
            <button class="d01-02-07-b d01-02-07-ok" type="button">同意する</button>
          </div>
        </div>

CSS

.prev.d01-02-07{padding:0;align-items:stretch}
        .d01-02-07-page{width:100%;height:100%;padding:26px 22px;display:flex;flex-direction:column;gap:14px;justify-content:center}
        .d01-02-07-block{height:12px;border-radius:6px;background:#e2e8f0}
        .d01-02-07-bar{position:absolute;left:16px;right:16px;bottom:16px;background:#0f172a;color:#fff;border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 16px 34px rgba(0,0,0,.32);transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
        .d01-02-07-bar.d01-02-07-in{transform:translateY(0)}
        .d01-02-07-txt{font-size:12.5px;line-height:1.6}
        .d01-02-07-acts{display:flex;gap:10px;justify-content:flex-end}
        .d01-02-07-b{border:0;border-radius:8px;padding:8px 18px;font-size:12px;font-weight:700;cursor:pointer;transition:opacity .2s ease}
        .d01-02-07-b:hover{opacity:.85}
        .d01-02-07-deny{background:transparent;color:#cbd5e1;border:1px solid #475569}
        .d01-02-07-ok{background:#22c55e;color:#052e16}

JavaScript

(function(){
        var root=document.getElementById('item-01-02-07');if(!root)return;
        var bar=root.querySelector('.d01-02-07-bar');
        function reset(){setTimeout(function(){bar.classList.add('d01-02-07-in');},400);}
        root.querySelectorAll('.d01-02-07-b').forEach(function(b){
          b.addEventListener('click',function(){
            bar.classList.remove('d01-02-07-in');
            setTimeout(reset,2200);
          });
        });
        reset();
      })();

クラス名 .d01-02-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。