指定要素がウィンドウ内にあればクラスを付加

指定要素がウィンドウ内にあればクラスを付加、ウィンドウ外であればクラスを削除する方法を紹介します。

HTML

補足

• ウィンドウ内にあるかを判定する要素に checker クラスを付けます。

jQuery

補足

• 判定する要素の上端がウィンドウ内にあれば、判定要素に IN クラスを付加し、ウィンドウ外であれば IN クラスを削除しています。
• このサンプルでは、ウィンドウ上下端から内側へ 100 ピクセル入ったエリアに判定要素があるかチェックしています。

CSS

補足

• このサンプルでは、IN クラスを付加された判定要素の背景色が緑色になります。

サンプル

「指定要素がウィンドウ内にあればクラスを付加」のサンプル

”もっと見る” をクリックして続きを表示

”もっと見る” をクリック（タップ）して続きを表示する方法を紹介します。

HTML

補足

• ul 要素に show-more クラスを付けます。
• li 要素に 表示する内容を記述します。
• span 要素の next クラスで続きを表示するようにします。
• span 要素の close クラスで表示された続きを閉じるようにしています。

jQuery

補足

• next クラスがクリックされたら、自身を非表示にして、直後の li 要素を表示します。
• close クラスがクリックされたら、最初の li 要素以外を非表示にして、すべての next クラスを表示状態に戻しています。

CSS

補足

• show-more クラスの最初の li 要素以外を非表示にしています。
• next クラスと close クラスのスタイルを設定しています。

サンプル

「”もっと見る” をクリックして続きを表示」のサンプル

非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】に表示

非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】で表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

• HTML は通常のモードと同じです。jQuery 側で表示モードを変えています。

jQuery

補足

• モーダル・ウィンドウを表示する前にクラス DIALOG を付加しています。それ以外は通常モードと同じです

CSS

補足

• クラス DIALOG が付いたモーダル・ウィンドウのコンテナのスタイルを定義しています。
• コンテナをダイアログ風の大きさにして、それがモーダル・ウィンドウの中央に表示されるようにしています。

サンプル

「非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】に表示」のサンプル

関連記事

• 非表示にしておいた div 要素をモーダル・ウィンドウに表示

YouTube 動画をモーダル・ウィンドウに表示

YouTube 動画をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

• div id="data-youtube" 内に埋め込みコードを記述し、次に２点を変更します。
• 埋め込みコードの "src" を "data-src" に変更します。
• 埋め込みコードに src="about:blank" を追加します。
• 尚、div id="data-youtube" は CSS で非表示にしています。

jQuery

補足

• div id="load-data-youtube" がクリックされたら、モーダル・ウィンドウにクラス YOUTUBE を付加します。
• div id="data-youtube" 内の埋め込みコードをモーダル・ウィンドウのコンテナにコピーします。
• コピーした埋め込みコードの data-src の値を src の値にセットします（ここで初めて YouTube 動画のデータがロードされます）。続いて、モーダル・ウィンドウを表示します。

CSS

補足

• クラス YOUTUBE が付加されたモーダル・ウィンドウのコンテナは、背景が透過されるように設定しています。また、スクロール・バーが表示されてしまうので overflow: hidden を設定しています。
• コンテナ内にコピーされた iframe の幅と高さは、コンテナと同じ大きさになるように 100% を設定しています。
• あらかじめ埋め込みコードを記述した div id="data-youtube" は非表示にしています。

サンプル

「YouTube 動画をモーダル・ウィンドウに表示」のサンプル

関連記事

• 非表示にしておいた div 要素をモーダル・ウィンドウに表示

クリックした画像をモーダル・ウィンドウに表示

クリックした画像をモーダル・ウィンドウに表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。

HTML

補足

• HTML に関してはモーダル・ウィンドウを用意する以外、特にすることはありません。

jQuery

補足

• 画像がクリックされたら、モーダル・ウィンドウにクラス IMAGE を付加します。
• 続いて、コンテナ内に span class="IMG を作成し、その背景画像にクリックした画像のファイル名を設定します。最後にモーダル・ウィンドウを表示します。

CSS

補足

• クラス IMAGE が付加されたモーダル・ウィンドウは、背景が透過されるように設定しています。
• span class="IMG" はブロック要素化しコンテナと同じ大きさにして、背景画像が比率を保ったまま最大表示されるよう contain を指定しています。

サンプル

「クリックした画像をモーダル・ウィンドウに表示」のサンプル

関連記事

• 非表示にしておいた div 要素をモーダル・ウィンドウに表示

非表示にしておいた div 要素をモーダル・ウィンドウに表示

あらかじめ非表示にしておいた div 要素をモーダル・ウィンドウに表示する方法を紹介します。

HTML

補足

• モーダル・ウィンドウ div id="MODAL-WINDOW" を用意し、非表示にしておきます。
• モーダル・ウィンドウに表示する内容を div id="data-div" 内に記述して、非表示にしておきます。

jQuery

補足

• #load-data-div がクリックされたら、モーダル・ウィンドウのコンテナに表示する内容をコピーし、モーダル・ウィンドウを表示します。
• モーダル・ウィンドウの閉じるボタンがクリックされたら、モーダル・ウィンドウを非表示にし、コンテナ内にコピーしたデータを空にします。
• 最後にモーダル・ウィンドウに付加されたクラスを削除します（このサンプルではクラスを付加していないので、削除する意味はありません）。

CSS

補足

• モーダル・ウィンドウ関連のスタイルを定義しています。
• iOS でコンテナのスクロール・バーが表示されないので、表示されるよう定義しています。
• モーダル・ウィンドウとコンテナに表示する内容は非表示にしています。

サンプル

「非表示にしておいた div 要素をモーダル・ウィンドウに表示」のサンプル