はてなでCookieを使って、モーダルウィンドウの年齢認証を作成する方法

グーグルに怒られそうなネタをまとめたブログ、最初に注意記事を固定してごまかしてましたが、そろそろどうにかしないとな、と。年齢確認画面を出すことにしました。18歳でいいのかわからんが元ネタが18歳だったのでそのままです。

JavaScript、苦手なのよね。
あとデザインを決めるセンスと気力がない。

ネタ元

スペシャルサンクス

阿豆らいち (id:AzuLitchi)さんの助言のおかげで動きました。ありがとうございます！
f:id:elve:20200926122300p:plain

設定->詳細設定->headに要素を追加

jQueryははてなのを使う。
cookieはなんかjQueryではないらしい。【2019年最新版】JavaScriptプラグインjs-cookieで超簡単にクッキー管理 | Pizzamanz.net
simplemodalはよくわからないところのを使ってるｗ　自己責任で。

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>

デザイン→カスタマイズ->フッタ

クッキー削除はテスト用なので確認したら削除してください。

<a class="remove_cookie">Cookie削除</a>
<!-- modal content -->
<div id="basic-modal-content">
    <h3>年齢確認画面</h3>
    <p>あなたは18歳以上ですか？

    <p><a href='https://snack.elve.club/'>いいえ</a></p>
    <p><a  class='yes'>はい</a></p>
</div>

<script>
jQuery(function ($) {
    var over18 = Cookies.get("over18");
        
    if(over18 !== "Yes"){
        $('#basic-modal-content').modal({
            autoResize :true,
            autoPosition: true,
            onShow: function(dialog){
                var modal = this;
                $('.yes',dialog.data[0]).click(function(){
                    var clifetime = new Date();
                    clifetime.setTime(clifetime.getTime()+(2*60*60*1000));//2時間
                    Cookies.set('over18','Yes',{expires: clifetime });
                    modal.close();
               });
            }   
        });
    }
    $('.remove_cookie').click(function(){
    Cookies.remove('over18','',{ expires: 0 });
    location.reload();
    });
});
</script>

デザイン→カスタマイズ-> デザインCSS

デザイン苦手なのできれいなの教えてください(´；ω；`)ｳｯ…
（サンプルのまま）

#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000;}

/* Container */
#simplemodal-container { color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container p {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container h3 {color:#84b8d9;}