JS

html

<header id="header">
	<h1>Logo</h1>
</header>

<main>
	<section>
	<h2>Area 1</h2>
		<p>使用したライブラリ：<a href="https://humaan.com/modaal/" target="_blank" >https://humaan.com/modaal/</a></p>
		<p><a href="#info" class="modal-open">お知らせを開く</a></p>
		<section id="info">
			<h2>Sale情報</h2>
			<p>11月1日～12月31日まで年末セールを開催！</p>
		</section>
	</section><!--/area1-->

	<section>
		<h2>Area 2</h2>
		<p>テキストが入ります。</p>
	</section><!--/area2-->

	<section>
		<h2>Area 3</h2>
		<p>テキストが入ります。</p>
	</section><!--/area3-->
</main><!--/main-->

<footer id="footer">
	<small>&copy; copyright.</small>
</footer>

css

/*========= モーダル表示のための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 ===============*/

header {
	background: #333;
}

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,ul {
	margin-top: 20px;
}

ul {
	list-style: none;
}

a {
	color: #333;
	outline: none;
}

small {
	background: #333;
	color: #fff;
	display: block;
	text-align: center;
	padding: 20px;
}

section {
	padding: 30px;
}

section: nth-child(2n) {
	background: #f3f3f3;
}

img {
	max-width: 100%;
	height: auto;
}

js

//初回のみモーダルをすぐ出す判定。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'); /*縦スクロールバーを出す*/
	}
});