パーツ番号 01-02-07 ・ JavaScript使用
Cookie同意バナー
下部からスライドインするCookie同意バー。同意/拒否のいずれかを押すと下へ消えます。プライバシー対応が必要なサイトで活用できます(クリックで動作)。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。