j-5モーダルウィンドウ

CSS Modal demo　・・・シンプルでクール jsをつかわず、cssのみでできる

Pop Easy Demo　・・・ポップでキュート

CSS Modal

→ 新規ファイル（modal.html）を作成
→ modal.cssを読み込む[download id=”12″]
→ modal.htmlに「モーダルウィンドウ」と記述。リンク先　#modal-text　クラス名　call-modal
→ modal.htmlにモーダルウィンドウの中身部分記述

<section class="semantic-content" id="modal-text" tabindex="-1" role="dialog">
<div class="modal-inner"><header>
<h2 id="modal-label">Headline</h2>
</header>
<div class="modal-content">
Content.</div>
<footer>
Footer</footer></div>
<!-- Use Hash-Bang to maintain scroll position when closing modal -->
<a class="modal-close" title="Close this modal" href="#!" data-dismiss="modal">×</a></section>

Pop Easy

→ 新規ファイル（pop.html）を作成
→ cssを読み込む[download id=”13″][download id=”14″]
→ jsを読み込む[download id=”10″][download id=”15″][download id=”17″]
→ pop.htmlに「モーダルウィンドウ」と記述。リンク先　#modal1　クラス名　modalLink
→ pop.htmlにモーダルウィンドウの中身部分記述

<div class="overlay"></div>
<div id="modal1" class="modal">
<p class="closeBtn">Close</p>
<h2>Your Content Here</h2>
</div>

→ 複数個ボタンにモーダルウィンドウをつけたい時はリンク先　#modal2　#modal3　#modal3　・・・とし、
div id=”modal2　div id=”modal3　div id=”modal4　・・・とする

※捕捉
背景の色を変えたい・・・site.jsのbackgroundを変更
透明度を変えたい・・・site.jsのopacityを変更