モーダルウィンドウクリックすると表示される子ウィンドウ。また、一度開いたダイアログボックスを閉じるまで、他の操作をでき なくする

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を変更

見ていただいてありがとうございます。↓ポチしてくださいませ。
  • 見た (0)
  • もう少し詳しく書いて! (1)
  • 見たけど役立たず (0)