cookie-Solid-type

by hondana

HTML

<html lang="ja">
<head>
<!-- CSS読み込み -->
<link href="cookie-file.css" rel="stylesheet">
</head>
<body>
<div style="padding:50px 10px; background:#cfcfcf">
  コンテンツが入るスペース
</div>

<!-- フッターに入れるCookie表示部分 start -->
<div id="cookie-banner" style="display: none;" class="obi">
当ウェブサイトでは Cookie を使用しています。引き続き閲覧する場合、Cookie の使用を承諾したものとみなされます。 
<a href="https://www.hoge.com/cookie-file.html" target="_blank" class="privacypolicy-cookie">プライバシーポリシー</a>
<a href="#" id="accept-cookies" data-cookie-set="accept" class="cn-set-cookie cn-button ok-button" aria-label="OK">OK</a></span>
<button id="accept-cookies" class="doui-button">同意する</button>
<button id="close-banner">✕</button>
</div>
<!-- フッターに入れるCookie表示部分 end -->

<!-- JS読み込み -->
<script src="cookie-file.js"></script>
</body>
</html>

CSS

.ok-button{
	background-color: #00997A;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 14px;
    margin: 0 10px 0 20px;
    color: #fff;
    text-decoration: none;
}
.doui-button{
	border: 2px solid #000;
    border-radius: 5px;
    font-size: 16px;
    padding: 0 10px;
    border: 2px solid #000;
}
.obi{
	display: block;
    background: #0000006b;
    padding: 10px;
    color: #fff;
}
.obi a.ok-button:hover{
	text-decoration: none;
	color:#fff;
}
.obi a.privacypolicy-cookie:hover{
	color:#333;
}
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    z-index: 1000;
    box-sizing: border-box;
    position: relative;
}

#close-banner:hover {
    color: #ddd;
}
#close-banner{
	background: none;
	border: none;
	font-size: 21px;
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 10px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // クッキーを取得する関数
    function getCookie(name) {
        var value = "; " + document.cookie;
        var parts = value.split("; " + name + "=");
        if (parts.length == 2) return parts.pop().split(";").shift();
    }

    // クッキーを設定する関数
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }

    // クッキーの承認状態をチェック
    if (!getCookie('cookieAccepted')) {
        // クッキーが承認されていない場合、通知を表示
        document.getElementById('cookie-banner').style.display = 'block';
    }

    // 「同意する」ボタンのクリックイベント
    document.getElementById('accept-cookies').addEventListener('click', function() {
        // クッキーを設定して通知を非表示にする
        setCookie('cookieAccepted', 'true', 365); // 1年間有効
        document.getElementById('cookie-banner').style.display = 'none';
    });
});