<!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 ===============*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area {
display: none;
}
/*全て共通：モーダルのボタンの色を変更したい場合*/
.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;
}
/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title {
font-size: 1.2rem;
text-align: center;
margin: 0 0 20px 0;
}
/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper {
padding: 0;
}
/*以下はコンテンツ内のレイアウト*/
.info-list dl,
.gallery-list {
display: flex;
}
.info-list dt {
margin: 0 10px 0 0;
}
.gallery-list li {
margin: 0 10px 0 0;
}
/*========= レイアウトのための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%
);
}
header {
background: #333;
}
header 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;
}
ul {
list-style: none;
}
p,
ul {
margin-top: 20px;
}
a {
color: #333;
}
small {
background: #333;
color: #fff;
display: block;
text-align: center;
padding: 20px;
}
section {
padding: 30px;
}
img {
max-width: 100%;
height: auto;
}</style>
</head>
<body>
<body>
<section>
<p>使用したライブラリ：<a href="http://humaan.com/modaal/" target="_blank">http://humaan.com/modaal/</a>
</p>
<!--テキストを含む一般的なモーダル-->
<ul class="info-list">
<li>
<a href="#info-1" class="info">
<dl>
<dt>2019.5.12</dt>
<dd>→ お知らせ1のタイトル</dd>
</dl>
</a>
</li>
<li>
<a href="#info-2" class="info">
<dl>
<dt>2019.5.12</dt>
<dd>→ お知らせ2のタイトル</dd>
</dl>
</a>
</li>
</ul>
<section id="info-1" class="hide-area">
<h2>お知らせ1</h2>
<p>おしらせの内容が入ります。</p>
</section>
<section id="info-2" class="hide-area">
<h2>お知らせ2</h2>
<p>おしらせの内容が入ります。</p>
</section>
<!--確認を促すモーダル-->
<p>
<a href="#login" class="confirm">→ 確認画面モーダルリンク</a>
</p>
<section id="login" class="hide-area">
</section>
<!--画像のモーダル-->
<ul class="gallery-list">
<!--data-groupに同じ名前を入れるとグループ化されて表示-->
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/img_01.jpg" class="gallery" data-group="gallery">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_01.jpg" alt="" width="100">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/img_02.jpg" class="gallery" data-group="gallery">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_02.jpg" alt="" width="100">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/img_03.jpg" class="gallery" data-group="gallery">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_03.jpg" alt="" width="100">
</a>
</li>
</ul>
<!--動画のモーダル-->
<p>
<a href="https://www.youtube.com/embed/s6y2VKBO1QQ?end=170&modestbranding=1&rel=0&controls=0" class="video-open">→ videoを開く</a>
</p>
<!--iframeのモーダル-->
<p>
<a href="https://web-navigator.com" class="iframe-open">→ iframeで指定のリンク先を開く</a>
</p>
</section>
<section id="info">
<h2>Sale情報</h2>
<p>11月1日～12月31日まで年末セールを開催！</p>
</section>
<!--/area1-->
<script>//テキストを含む一般的なモーダル
$(".info").modaal({
overlay_close: true, //モーダル背景クリック時に閉じるか
before_open: function () {
// モーダルが開く前に行う動作
$("html").css("overflow-y", "hidden"); /*縦スクロールバーを出さない*/
},
after_close: function () {
// モーダルが閉じた後に行う動作
$("html").css("overflow-y", "scroll"); /*縦スクロールバーを出す*/
} });
//確認を促すモーダル
$(".confirm").modaal({
type: "confirm",
confirm_title: "ログイン画面", //確認画面タイトル
confirm_button_text: "ログイン", //確認画面ボタンのテキスト
confirm_cancel_button_text: "キャンセル", //確認画面キャンセルボタンのテキスト
confirm_content:
"ログインが必要です。<br>この画面はボタンを押さなければ閉じません。" //確認画面の内容
});
//画像のモーダル
$(".gallery").modaal({
type: "image",
overlay_close: true, //モーダル背景クリック時に閉じるか
before_open: function () {
// モーダルが開く前に行う動作
$("html").css("overflow-y", "hidden"); /*縦スクロールバーを出さない*/
},
after_close: function () {
// モーダルが閉じた後に行う動作
$("html").css("overflow-y", "scroll"); /*縦スクロールバーを出す*/
} });
//動画のモーダル
$(".video-open").modaal({
type: "video",
overlay_close: true, //モーダル背景クリック時に閉じるか
background:
"linear-gradient( 109.6deg, rgba(218,185,252,1) 11.2%, rgba(125,89,252,1) 91.1% )", // 背景色
overlay_opacity: 0.8, // 透過具合
before_open: function () {
// モーダルが開く前に行う動作
$("html").css("overflow-y", "hidden"); /*縦スクロールバーを出さない*/
},
after_close: function () {
// モーダルが閉じた後に行う動作
$("html").css("overflow-y", "scroll"); /*縦スクロールバーを出す*/
} });
//iframeのモーダル
$(".iframe-open").modaal({
type: "iframe",
width: 800, //iframe横幅
height: 800, //iframe高さ
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>