動くWebデザイン
アイディア帳

動きを実現する仕組み

Modaal というモーダルウィンドウを表示するライブラリを使い、要素をクリックすると隠れていたコンテンツが出現。

［使用するライブラリ］
＊ jQuery
＊ Modaal（http://humaan.com/modaal/）

HTMLの書き方

1. head終了タグ直前にModaalのCSSと自作のCSSを2つ読み込みます。

   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css">
   <link rel="stylesheet" type="text/css" href="css/9-6-3.css">
   </head>

2. body内のモーダルを表示させたい場所にHTMLを記載します。各クラス名はモーダル表示にする際のきっかけになる名前になります。

   <!--1. テキストを含む一般的なモーダル-->
   <ul class="info-list">
   <li><a href="#info-1" class="info"><!--リンク先は表示させたいエリアのid名を指定-->
   <dl><dt>2021.5.12</dt><dd> お知らせのタイトル</dd></dl>
   </a></li>
   </ul>
   <section id="info-1" class="hide-area"><!--表示エリアのHTML。id名にリンク先と同じ名前を指定。非表示にするためhide-areaというクラス名も指定。-->
   <h2>お知らせ</h2>
   <p> おしらせの内容が入ります。</p>
   </section>
   
   <!--2. 確認を促すモーダル-->
   <p><a href="#login" class="confirm">確認画面モーダルリンク</a></p><!--リンク先は表示させたいエリアのid名を指定-->
   <section id="login" class="hide-area"></section><!--表示エリアのコンテンツの中身はJS側に書き込む。非表示にするためhide-areaという
   クラス名も指定-->
   
   <!--3. 画像のモーダル　※data-group に同じ名前を入れるとグループ化されて表示-->
   <ul class="gallery-list">
   <li><a href="img/01.jpg" class="gallery" data-group="gallery"><img src="img/01.jpg" alt=""></a></li>
   <li><a href="img/02.jpg" class="gallery" data-group="gallery"><img src="img/02.jpg" alt=""></a></li>
   <li><a href="img/03.jpg" class="gallery" data-group="gallery"><img src="img/03.jpg" alt=""></a></li>
   </ul>
   
   <!--4. 動画のモーダル ※アドレスの取得方法は後述-->
   <p><a href="https://www.youtube.com/embed/Kq95zgCrxeY" class="video-open"> video を開く</a></p>
   
   <!--5. iframe のモーダル-->
   <p><a href="https://kubotaryoko.com" class="iframe-open"> iframe で指定のリンク先を開く</a></p>

3. body 終了タグ直前に jQuery、Modaal、動きを制御する自作のJS の3つを読み込みます。

   <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>
   <!--自作のJS-->
   <script src="js/9-6-3.js"></script>
   </body>

■動画のアドレスの取得方法

・Youtube
「共有」→「 < > 埋め込む」→<iframe> タグ内のsrc=””にかかれているURL
（例）https://www.youtube.com/embed/Kq95zgCrxeY

・Vimeo
「 共有」→「埋め込み」→<iframe> タグ内src=””にかかれているURL 数字終わりまで
（例）https://player.vimeo.com/video/123456789

自作の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;
}

自作のJS内の書き方

※　Modaal のオプション設定は　https://github.com/humaan/Modaal　参照

//1. テキストを含む一般的なモーダル
$(".info").modaal({
	overlay_close:true,//モーダル背景クリック時に閉じるか
	before_open:function(){// モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden');/*縦スクロールバーを出さない*/
	},
	after_close:function(){// モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll');/*縦スクロールバーを出す*/
	}
});
	
//2. 確認を促すモーダル
$(".confirm").modaal({
  type:'confirm',
  confirm_title: 'ログイン画面',//確認画面タイトル
  confirm_button_text: 'ログイン', //確認画面ボタンのテキスト
  confirm_cancel_button_text: 'キャンセル',//確認画面キャンセルボタンのテキスト
  confirm_content: 'ログインが必要です。
この画面はボタンを押さなければ閉じません。',//確認画面の内容
});


//3. 画像のモーダル
$(".gallery").modaal({
	type: 'image',
	overlay_close:true,//モーダル背景クリック時に閉じるか
	before_open:function(){// モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden');/*縦スクロールバーを出さない*/
	},
	after_close:function(){// モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll');/*縦スクロールバーを出す*/
	}
});

//4. 動画のモーダル
$(".video-open").modaal({
	type: 'video',
	overlay_close:true,//モーダル背景クリック時に閉じるか
	background: '#28BFE7', // 背景色
	overlay_opacity:0.8, // 透過具合
	before_open:function(){// モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden');/*縦スクロールバーを出さない*/
	},
	after_close:function(){// モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll');/*縦スクロールバーを出す*/
	}
});
	
//5. 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');/*縦スクロールバーを出す*/
	}
});

この技術を使ったサンプルサイト

• 

  Sample10
  映画・音楽のエンタメ系サイト