Cookie使用同意のポップアップを作ってみた

2021/06/10
Web制作
Cookie画像

サイトを訪れたときに時々表示されるCookie使用同意のポップアップ。ちょっとしたお遊びでいくつか作ってみました。

コードはCodePenのものを参考にしてください。

ノーマルタイプ

See the Pen Cookie-consent1 by Fuma (@fuma_it) on CodePen.

サイト下部に固定表示されるよくあるタイプです。

ボタンが押されたタイミングで非表示用のクラスを追加し、見えなくなるようにしています。.cc-hide1はパッと消えて、.cc-hide2はゆっくりと消えるのでお好みで。

上から来るぞ!

See the Pen Cookie-consent2 by Fuma (@fuma_it) on CodePen.

ロード2秒後に上から降りてくるポップアップです。

下から来るぞ!

See the Pen Cookie-consent3 by Fuma (@fuma_it) on CodePen.

スクロールで下からニョキっと出てくるポップアップです。

何度でも蘇るさ

See the Pen Cookie-consent4 by Fuma (@fuma_it) on CodePen.

消しても一定時間で復活するポップアップです。もはや嫌がらせ。

最後に

つまらぬものを作ってしまった…

なんちゃって。使えそうなのがあったらぜひご利用ください。

2件のコメント
こんにちは^^

僕には関係ないかな?と思いながら少し検索してみてGDPRなるものがあることを初めて知りました。
EU加盟国向けにブログを発信していない場合は関係ないみたいなので少し安心。

ただ英語で運営していたりするブログだと当てはまる可能性もあるようで。ないとは思うけれど、英語でブログを書いてみたくなったら気をつけよう^^;また今日も一つ勉強になりましたm(_ _)m
>ひき太郎さん
コメントありがとうございます。夜のテンションで勢いで書いてしまった記事ですが、そうしてお役に立てたなら何よりです(^^)