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

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にモーダルウィンドウの中身部分記述

 

 

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にモーダルウィンドウの中身部分記述

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

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

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