プログラミング初心者向けに、jQueryのloadメソッドで外部のHTMLファイルを読み込む方法について解説しています。実際にソースコードを書きながら説明しているので、初心者の方でもすぐに理解することができるでしょう。 1ページの中で画面ごとに切り替えて見せたいときに便利だと思います。 jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する. 先ほど作成したオーバーレイのHTMLコードは あらかじめHTML上に用意されていないため、jQueryで動的に生成する必要がありましたね。具体的には次のように行ないます。キーボード操作などで、モーダルウィンドウが多重起動してしまうのを防止しています。 コンテンツを浮かび上がるようにポップアップ表示させるモーダルウィンドウ。ヘルプやアラートなど、ちょっとしたメッセージを表示するのにスペースを取らないから重宝しますよね。今回はこのモーダルウィンドウの作り方をJavaScript初心者向けに解説します。, テキストリンクをクリックすると、モーダルウィンドウが表示されます。コンテンツ内の閉じるボタン、または背景のオーバーレイをクリックすると、モーダルウィンドウを閉じます。, まずはモーダルウィンドウで表示されるコンテンツを作成していきます。後ほどいくらでも変更することが可能なので、現段階ではこだわる必要はありません。サンプルを下記に用意しました。, モーダルウィンドウを終了させるためのボタンとして、「閉じる」というリンクテキストを用意します。全体を囲むdiv要素とボタンには、それぞれ、id属性値を付けておきましょう。display:noneで初期状態では非表示にしておくことを忘れないで下さいね。, コンテンツを囲むdiv要素にはz-indexの値を設定します。z-indexとは、「手前、奥」の概念です。z-indexの値が高いほど、そのコンテンツは、値が低い他のコンテンツよりも手前に表示されることになります。初期値は0(または親要素と同じ)です。, モーダルウィンドウのコンテンツは、通常表示されている他のコンテンツ(z-index:0)と、次項で作るオーバーレイ(z-index:1)よりも手前に表示させるので、2を指定しておきましょう。もし、他のライブラリなどを導入している関係で手前に上手く表示されない場合は、9999にするなど調整して下さい。, position:fixedを指定しておきます。これは、「対象の要素を指定した位置に固定する」という命令です。「固定」というのは、ページをスクロールしても、ずっと画面上のその位置に止まり続けるという意味です。, 「画面上のどの位置に固定するか」は、top(画面上部から何ピクセルか)と、left(画面左部から何ピクセルか)などで指定する仕組みなのですが、現時点ではまだ指定しません。後ほど、jQueryによって動的に指定します。, 続いて、オーバーレイの部分を作成していきましょう。モーダルウィンドウを表示させると、よく背景が黒や白の半透明になって、その部分をクリックするとウィンドウを閉じたりできますよね。あの膜みたいな部分のことです。, 下記はサンプルです。後ほどjQueryで操作するため、id属性値を指定しておきます。なお、このHTMLはJavaScriptで動的に生成するため、HTML上に用意しておく必要はありません。後ほど、このHTMLを呼び出すということを意識しておいて下さい。, 今回のオーバーレイは、ページ全体ではなく画面全体を覆います。そのため、width:100%とheight:120%を指定し、さらにposition:fixedで位置を固定しておきましょう。図のように、スクロールしてもずっと付いてくるのをイメージして下さい。これで、あたかもページ全体が覆われているかのようになりますね。, heightの指定を120%にしているのは、スマホ対策です。上記図を見れば分かる通り、iPhoneではスクロールをすると上下のナビバーが隠れる仕組みになっています。このため、heightの値が変わってしまい、オーバーレイが画面の高さよりも小さくなってしまう不具合が起こります。そのため、余裕を持って120%の値を指定しています。, 色を#D36015というような16進数(Hex)ではなく、rgbaで指定することで、不透明度を加えることができます。モーダルウィンドウを表示した時、コンテンツが背景にうっすらと映っている状態にするのに必要ですね。下記は黒、不透明度0.75を指定したものです。()内の第1〜3引数がRGB指定による色、第4引数が不透明度を表します。, ここからいよいよ、JavaScriptを取り扱っていきます。jQueryを利用するので、あらかじめ読み込んでおきましょう。, モーダルウィンドウを呼び出すためのボタンを用意しておきましょう。下記はid属性値を付けたテキストリンクのサンプルです。, まずはボタンをクリックした時にモーダルウィンドウを表示させるイベントを設定しましょう。クリックイベントは下記の通り指定します。, ボタンをクリックした時に、まずはオーバーレイ(id: modal-overlay)を表示させましょう。先ほど作成したオーバーレイのHTMLコードは あらかじめHTML上に用意されていないため、jQueryで動的に生成する必要がありましたね。具体的には次のように行ないます。キーボード操作などで、モーダルウィンドウが多重起動してしまうのを防止しています。, appendは対象の要素内の最後に、指定したHTMLを追加する命令です。上記では、body要素内の最後に、オーバーレイのHTMLコードを追加しています。さらに、初期ではdisplay:hiddenで非表示状態なのを、fadeInにより、じんわりと表示させています。, 続いて、メインになるコンテンツ部分を出現させましょう。「出現のさせ方」は、オーバーレイと同じく、フェードインさせるだけです。, ここが今回、頭を使うところです。コンテンツを画面の真ん中に表示させるにはどうすればいいかを考えてみましょう。position:fixedのtop(画面上部から何ピクセル離れているか)とleft(画面左部から何ピクセル離れているか)の値を、上手く設定します。, 例えば、画面幅が1000pxあって、コンテンツ幅が200pxある場合、真ん中に持ってくるには、left(片側の余白の値)に400pxを設定します。左端から400px離せばいいというわけです。縦幅も同じですね。「片側の余白」は次の計算で求めることができます。, 横幅、縦幅を求めてセンタリングするには、次の通り、処理しましょう。複数の場所から呼び出せるように、centeringModalSyncer()という関数にしてあります。このように、モーダルウィンドウを開いた時の画面幅に合わせてtopとleftの値を設定してやることで、センタリングが実現します。, オーバーレイを作成する時にも触れましたが、スマホ(iPhone)だと、$(window).height()で取得できる高さは「上下のナビバーのスペースだけ縮んだ分の高さ」です。, また、それとは別に、$(window).height()で取得できる高さは、微妙に少ない方向にズレることがあるそうです。そのため、正確な高さを取得したい場合は、jQueryではなく、下記のようにJavaScript本来の記述で取得するのをお勧めします。, 今回のモーダルウィンドウにおいては、特に大きな影響がないため、あえて$(window).height()をそのまま利用しています。むしろ、取得できるウィンドウの高さが少なくなる分、少しだけウィンドウがセンターより上に来るので見やすいなーとか思ってます。, いよいよ仕上げです。モーダルウィンドウを終了させるクリックイベントを設定しましょう。, オーバーレイ(#modal-overlay)と閉じるボタン(#modal-close)、2つの要素に同じクリックイベントを設定します。それには、セレクタをカンマで区切って、次のように記述しましょう。, click()の直前にあるunbind()は、対象の要素にそれまで設定されていたイベントをクリアする命令です。ここでは、おまじないのようなものだと思って下さい。, オーバーレイとコンテンツをフェードアウトで非表示にした後に、HTML上からオーバーレイのHTMLを削除します。それには次の通り、命令しましょう。fadeOut()の第2引数に関数を指定することで、その関数がフェードアウトしたタイミングで実行されます。remove()は対象の要素をHTML上から削除する命令です。, モーダルウィンドウの基本的な作成方法は分かったと思います。この章では、ここまでを踏まえて、モーダルウィンドウを色々とカスタマイズしていく方法を紹介します。, ここまでのプログラムでは、モーダルウィンドウを表示させた後にウィンドウを広げると、センタリングが崩れてしまいます。ブラウジングをしていてウィンドウの幅を変更する人はそうはいないので、無視しても問題ないとは思いますが、「どうしても気になる…」という場合は「リサイズが起きたらセンタリングする」という処理を加えましょう。, リサイズを条件に、先ほど作成したセンタリングの関数を実行すればいいですね。それには次の通り、記述します。この1行を加えるだけで、リサイズに対応することが可能です。, 制作方法では、モーダルウィンドウのコンテンツや、モーダルウィンドウを開くためのボタン(リンクテキスト)にID属性値を設定してきました。これでは、1ページにつき、1つのモーダルウィンドウしか設置できません。これを、例えば、クラス属性値に変更することで、1ページ内に複数種類のモーダルウィンドウを設置することが可能になります。下記はそのサンプルデモです。, 下記は1ページ内に複数のモーダルウィンドウを設置するサンプルデモです。それぞれのリンクテキストに応じて、指定されたモーダルウィンドウが開きます。, このモーダルウィンドウは、ダウンロードコーナーで配布しているので、興味のある人は、ぜひ、お使い下さい。仕組みを簡単に説明すると、これまで通りに、開いた時に表示させたいモーダルウィンドウのコンテンツを用意し、これをdisplay: none;で非表示状態にしておきます。1つ1つのコンテンツには、一意のID属性値を設定しておくのを忘れないで下さい。, そして、これらのモーダルウィンドウを開くボタンとなる要素には、特定のクラス属性値(下記サンプルではmodal-syncer)を設定しておいて下さい。ここで指定したクラス属性値を持つ要素全てに、クリックイベントを設置する処理を行なうことになります。そして、複数版ならではとして、それぞれのボタン要素に、data-targetという属性値を付けて、その値には、開くコンテンツのID名を指定しておきます。, それぞれのボタン要素をクリックした時に、data-targetの値を参照することによって、その時に開くモーダルウィンドウのコンテンツが決定するという仕組みです。このようにして、1ページに複数種類のモーダルウィンドウを設置することが可能となります。, モーダルウィンドウを開いた時と閉じた時で、スクロール位置がズレてしまうと、利用者が混乱してしまいます。それを防ぐには、モーダルウィンドウを開いた時の位置を記憶しておき、閉じた直後に、その位置まで強制的に移動させてあげましょう。開く時と閉じた直後に、それぞれ、処理を加えて下さい。ここでは、スクロール位置は、グローバル変数に記録しておくことにします。, 大変、お疲れ様でした!今回解説したプログラムのコードをまとめたものが下記です。確認用にお使い下さい。全てのファイルを同一ディレクトリに設置し、modal.htmlにアクセスして下さい。, ファイル名をクリックすると内容を確認できます。「Download Zip」をクリックするとファイル一式をダウンロードできます。, SyncerシンカーはSync(同期)とer(する者)で「知識や感動を同期するブログ」という意味の造語です。みなさんと共に進化(しんか)していきたいという思いも込めてます。また来たくなったら、Syncerで検索してね!, Copyright © 2014-2017SYNCER All Rights Reserved.https://syncer.jp/. 必須なHTML要素は「オーバーレイを表示するHTML要素」と「モーダルウィンドウを表示するHTML要素」の2つです。あとは、JQueryのイベントを処理するためにボタンなどを作成しましょう。 jQuery「prepend / prependTo」で要素内の先頭にHTMLを挿入する, jQuery「.slideUp( )/.slideDown()/.slideToggle()」で縦方向のスライドで表示・非表示する方法, jQuery「.show( )/.fadeIn()」で指定要素をフェードインで表示する方法, jQuery「.hide( )/.fadeOut()」で指定要素をフェードアウト非表示にする方法, jQuery「.contents( )」で指定要素の子要素・テキストノードを取得する方法, jQuery「.next() / .nextAll()」で直後の兄弟要素を取得する方法, jQuery「.prevUntil() / .nextUntil()」で前後の兄弟要素を取得する方法, jQuery「.prev() / .prevAll()」で直前の兄弟要素を取得する方法, jQuery「.get()」で jQueryオブジェクトからDOM要素を取得する方法. モーダルウインドウの作り方を知りたい!できれば自分でカスタムして使いたい!そのような方の為に、ただ作るだけでなく自分でカスタムできるように解説していきたいと思います。 javascriptを使用することによって幅と高さを取得することが可能です。 OnePageScroll HOME > WEB制作・コーディング・フロントエンドを学ぶ > javascript > jQuery「html()」でHTMLを取得・変更する, WEBデザイナーになりたいけど「何から勉強すればいいのか」わからなくて何も手につかない…。そんな方に、現役WEBデザイナーが効率的な学習方法を解説!, jQueryのメソッド「.html()」は、指定要素のhtmlの取得・設定ができるメソッド。, 今回は、jQueryで「htmlを取得・設定」できるメソッド「.html()」について、その使い方をサンプルを交えて解説しよう。, $("p").html("変更する");のように記述し、パラメータに任意のhtmlを入れる事で、指定したhtmlに変更する事ができる。, 指定要素のhtmlを取得する場合はvar hoge = $("p").html();のように.html()パラメータを指定せずに「空」にして、任意の変数に格納する事でhtmlを取得できる。, これは、変数 hogeに$("div p")の中身を「html形式」で取得した値を格納してconsole.logで出力する例だ。, その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう!, jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…, しかしご存知の通りjQuery等の学習は一人だと大変で、初心者が「独学」でマスターするには1年近くかかり、ライバル達に出遅れてしまう…。, 独学で約1年という時間を無駄にするくらいなら、値段を抑えた「オンラインスクール」を利用して2ヶ月でサクッと学んだ方が経済的!, オススメのスクールは、実際に私が受講した「テックアカデミー」と、LINE・ガンホーなどの有名企業が社員研修で使っている「CodeCamp(コードキャンプ)」というオンラインスクール。, 【デザインが好きなら】 →コードキャンプの「WEBデザイナー向けコース」がオススメ↓, 【コーディングが好きなら】 →テックアカデミーの「フロントエンドコース」がオススメ↓, 「LINEや、ガンホー、セプテーニ、アクサ生命」なども社員研修として利用している、大企業のお墨付きのスクールとは?良い評判・悪い評判や内容を徹底解説!, WEBデザイン・グラフィックデザイン歴:約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます. ええ、違うんです、やりたいのはそうじゃない。そもそも、そのexternal.html、HTMLとして成立してねーだろ。 じゃあどうする … 次のコードの場合、, 下記の例では、もしページ内にP要素が6つあれば、「P要素は6個存在します!」という文章に切り替わります。, 取得の場合、セットの場合、いずれの場合でもinnerHTMLプロパティを使用することによる注意事項があります。, ブラウザによっては指定したHTML文字列に対して忠実にそれを生成してくれるとは限りません。 モーダルウィンドウのコンテンツは、transform:scale(0,0);によって縮小され見えない状態になっています。 モーダルウィンドウにactiveクラスが付くことによってモーダルウィンドウが元の状態に拡大され表示されます。 jQuery IE8より前のバージョンでは、href属性は絶対URLに変換されます。 jQueryのtext()とhtml()の違いについて紹介します。jQueryビギナー向けのエントリーです。 1.text()について. ©Copyright2020 まなびアクト.All Rights Reserved. 開く際に利用しているタグの属性にdata-targetを追加しどのモーダルウィンドウを開くかを指定する, お問い合わせやユーザー登録など項目の少ないフォームを画面遷移させずモーダルで表示する. 自分が作成するサイトに合わせてモーダルウィンドウをカスタムするためには、モーダルウィンドウがどんな部品で構成されているのか理解するところから始めましょう。, それでは早速表示させたいウィンドウと、それを押すと表示される元になる部分を作成してみます。, この実装で以下の様にボタンが押されたら画面中央にモーダルウィンドウが開くところまでは実装可能です。, jQueryを利用しているため、headタグ内でjQueryのファイルを読み込むことをお忘れなきようご注意ください。, class=openがクリックされた際にclass=modalがフェードイン、class=closeがクリックされた際にclass=modalがフェードアウトするようにjQueryを利用して実装してあります。, class=modalにはどこでクリックしても画面中央に現れるようCSSが設定されています。, openとcloseはとりあえずdivタグにスタイルをあててボタン風にしていますが、ここは該当のclassさえあてておけばaタグだろうがimgタグだろうが何でもOKです。, これだけではモーダルウィンドウを開いたまま他のコンテンツが見えてしまっているため、次にオーバレイを作成します。, モーダルウィンドウ以外の場所に黒幕をかぶせるような形になります。実際にはサイト→黒幕→モーダルウィンドウの三層構造になります。, こちらを表示するとわかると思いますが、元のページの一層上のレイヤーに黒幕が被さっていることが確認できると思います。, 元のコンテンツは実質z-index: 0;となっており、z-index: 1;を指定することで一層上に表示させることが可能になります。2,3を増やせば何層にも重ねることが可能です。, これで元のページにあるボタンなどはさわれなくなります。ひとまず現状ではいきなり表示されていると何もできないので、.overlayにdisplay: none;を追加してデフォルト非表示にしておきましょう。, そして次に表示がクリックされた際にオーバーレイを表示し、閉じるがクリックされた際にオーバレイを非表示にする設定をJavaScriptで行います。, ついでに黒幕部分を押した場合にもモーダルを閉じるように「$(‘.close, .overlay’)」と変更しています。, モーダルウィンドウに黒幕が被さってしまっています。これはz-indexの指定がないものはデフォルトで0が設定されているからです。, 黒幕はz-indexに1を設定していますので、モーダルウィンドウをそれよりも上に表示するには.modalにz-index: 2;を追加すればOKです。, これでモーダルウィンドウが最前面に表示され、閉じるボタンも押せるようになりました。, 以上、モーダルウィンドウとオーバーレイの二つの部品を理解すればモーダルの実装はOKです。, 上記の例では一つの表示ボタンと一つのモーダルウィンドウでしたが、これが複数あると対応を考えないといけません。, 開く際にクリックする要素にdata-targetを付与し、JavaScript内で「$(this).attr(‘data-target’)」で値を取得し同名のモーダルウィンドウをフェードインさせています。, 閉じる際にはどのモーダルウィンドウにもclass=modalが設定されているので閉じるフェードアウトの処理に変更はありません。, これで正真正銘色々なパターンのモダールウィンドウに対応できるようになったかと思います。, 実際モーダルウィンドウをどこで使うんだ、ということですが以下のようなパターンが多いかと思います。, レストランのサイトでメニュー画像がたくさん並ぶ中、料理の写真をクリックすると料理に関する詳細がモーダルで表示される。, ランディングページから遷移せずにモーダルでメールアドレスだけ入力してすぐにお問い合わせができる。, 例えば上記の例で言えば、全料理の個別ページなんて作るまでもない細かい表示の場合、モーダルを利用すれば1ページ内に収めることができます。, ランディングページで盛り上がった気分が、次のお問い合わせページに遷移することで冷めてしまうことを防げるかもしれません。, 表示するとページが縦に長くなったり、横に長くなったりする補足説明を表示するボタンに収めてページ内の表示をコンパクトに収めるのにも使えます。.