<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/modaal/0.4.4/css/modaal.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modaal/0.4.4/js/modaal.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js">
</script>
<style>@charset "utf-8";
/*========= モーダル表示のためのCSS ===============*/
/*infoエリアをはじめは非表示*/
#info {
display: none;
}
/*モーダルの横幅を変更したい場合*/
.modaal-container {
max-width: 600px;
}
/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
background: #ccc;
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
background: #666;
}
/*========= レイアウトのためのCSS ===============*/
body {
vertical-align: middle;
text-align: center;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(222, 168, 248, 1) 0%,
rgba(168, 222, 248, 1) 21.8%,
rgba(189, 250, 205, 1) 35.6%,
rgba(243, 250, 189, 1) 52.9%,
rgba(250, 227, 189, 1) 66.8%,
rgba(248, 172, 172, 1) 90%,
rgba(254, 211, 252, 1) 99.7%
);
}
h1 {
font-size: 1.5rem;
text-align: center;
text-transform: uppercase;
padding: 20px;
color: #fff;
}
h2 {
font-size: 1.2rem;
text-align: center;
margin: 0 0 30px 0;
}
p {
margin-top: 20px;
text-align: center;
}
a {
color: #333;
outline: none;
}
section {
padding: 30px;
}</style>
</head>
<body>
<body>
<section>
<p>使用したライブラリ：<a href="http://humaan.com/modaal/" target="_blank">http://humaan.com/modaal/</a>
</p>
<p>
<a href="#info" class="modal-open">お知らせを開く</a>
</p>
</section>
<section id="info">
<h2>Sale情報</h2>
<p>11月1日～12月31日まで年末セールを開催！</p>
</section>
<!--/area1-->
<script>//初回のみモーダルをすぐ出す判定。flagがモーダル表示のstart_open後に代入される
var access = $.cookie("access");
if (!access) {
flag = true;
$.cookie("access", false);
} else {
flag = false;
}
//モーダル表示
$(".modal-open").modaal({
start_open: flag, // ページロード時に表示するか
overlay_close: true, //モーダル背景クリック時に閉じるか
before_open: function () {
// モーダルが開く前に行う動作
$("html").css("overflow-y", "hidden"); /*縦スクロールバーを出さない*/
},
after_close: function () {
// モーダルが閉じた後に行う動作
$("html").css("overflow-y", "scroll"); /*縦スクロールバーを出す*/
} });
//# sourceURL=pen.js</script>
</body>
</html>