初心者でもOK!jQueryで説明文のポップアップを自作する方法マサト2019/7/302019/7/30jQueryでポップアップ表示を作る方法がよく分からない画像に説明文をアニメーションで表示させたい効率よくポップアップを自作できるようになりたいjQueryを活用したWebコンテンツとしてポップアップ表示を作りたいと考える方も少なくないでしょう。ユーザーに何らかのメッセージを見てもらいやすくなるだけでなく、重要なアラートにもなるので今でも人気が高いわけです。いざプログラミングしようとすると何から始めたら良いのか迷う人も多いでしょう。そこで、この記事では初心者でも今日からjQueryを使ったポップアップ表示手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。一人でも多くの方がjQueryの不安を解消できれば幸いです。まとめポップアップ表示の基本この章では、jQueryを活用してポップアップ表示するための基本的な手法について見ていきましょう。その仕組み・プログラミング方法について学んでいきます。jQueryで実装するポップアップの仕組み本記事のポップアップは、画面が暗転して中央に小さなウィンドウでメッセージが表示される仕組みのことです。ポップアップメッセージの全体図このポップアップを実現するには、以下のような機能が必要になることが分かります。上記のなかで、実はjQueryが担当するのはクリックイベント処理でポップアップを表示させるきかっけを作る部分だけです。あとの部分はHTMLとCSSの組み合わせに過ぎません。ポップアップの自作についてはあまり難しく考えずに、これまでのjQueryにおける基本メソッドを学習していたら誰でも作れるものなんです。説明文をポップアップで表示するそれでは、実際にポップアップを作っていきましょう!まずは骨組みとなるHTMLですが、ボタン要素とポップアップ要素の2つに大きく分かれます。ポップアップ表示サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト閉じるポップアップ要素については、画面全体を暗転させるのがClass属性値【popup】になり、実際のメッセージ表示部分がClass属性値【content】になります。初期状態はこのポップアップ要素を非表示にしておき、ボタンをクリックした時にjQueryで表示させるという流れになります。そこで、CSSでは【display:none】でコンテンツを非表示にしておき、表示された時の見え方として画面全体を少し暗くするスタイルにすれば良いわけです。50%;}【height:100vh】【width:100%】の2つで画面全体を指定することになります。positionをfixedにすることで画面をスクロールできないように固定化しておくと良いでしょう。このままだとポップアップが表示された時に画面中央に固定されません。そこで、簡単な調整方法としてフレックスボックスを次のように記述すると良いでしょう。center;}新しくshowというクラス名を作り、ポップアップを起動する時にこのクラスを追加することで画面中央にポップアップが表示されるようになります。$('.popup').fadeOut();});とてもシンプルなプログラムですが、これだけでポップアップを自作することができるわけです。ポイントはaddClass()で先ほど作成したshowクラスを追加しており、ポップアップが表示される時に画面中央に固定されるようにしています。CodePen.0キャプションを表示この章では、画像にマウスを近づけると説明文(キャプション)がフワッと表示されるようにする方法を見ていきましょう。画像に説明文を表示する仕組み前章のポップアップを表示する仕組みが理解できていれば、実は画像にキャプションを表示するのもほとんど同じような仕組みで実装することができます。画像を背景として考えて、キャプションをポップアップ表示するようなニュアンスに近いわけです。今回の場合は画面中央ではなく画像の下段に表示するように工夫する必要があります。説明文その3この例では、3つの画像を表示するように配置していますが、もちろん画像はさらに増えても問題ありません。pタグの部分がキャプションになるのですが、これは初期状態で非表示にしておきjQueryから操作するようにしましょう。CSSは次のようになります。relative】にしておき、pタグの部分を【position:absolute】にする関係性に注目しておいてください。これにより、画像内の好きな位置にキャプションを表示できます。pタグを【bottom:0】にすることで、画像の最下段に配置させることができるわけです。border-box】にしておくのを忘れないようにしましょう。jQueryのプログラムについては、hover()を使ってマウスの状態を制御するようにイベント処理を組み立てましょう。);});hover()は第1引数にマウスが画像内に入った時の処理を記述し、第2引数にマウスが画像から離れた時の処理を記述します。fadeOut()をpタグに実行すればキャプションが表示されるというわけです。CodePen.0プラグインの活用この章では、jQueryプラグインを活用してより簡単にポップアップを実装できるようにしてみましょう。プラグインの導入方法から実際のプログラミング手法について学んでいきます。Popupのプラグインを導入すると、非常に簡単な記述でポップアップ表示をWebページに組み込むことが可能です。面倒なCSSによる調整やイベント処理の実装なども大幅に省くことができるのが特徴です。JSファイルをダウンロードしましょう。magnific-popup.min.cssmagnific-popup.min.jsまた、ファイルをダウンロードしなくても、以下のCDN経由からすぐに利用することも可能です。https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.csshttps://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.jsちなみに、magnific-popup.min.jsファイルはjQueryの本体ファイルの次に読み込むように順番には気をつけましょう。ポップアップ表示を実装するそれでは、実際にプラグインを活用したポップアップを実装してみましょう。表示するポップアップのHTMLを次のように作ります。サンプルテキストサンプルテキストサンプルテキスト単純なメッセージを表示するだけですが、クラス属性の箇所に注目してみてください。【mfp-hide】というクラス名を付与することで、初期状態でコンテンツを非表示にしてくれます。ID属性値はポップアップを表示するリンクのhref属性で利用します。ポップアップ表示このhref属性で指定したID属性値を持つコンテンツを、ポップアップで表示するという意味になるので注意しておきましょう。ポップアップ表示するメッセージのスタイルも簡単に記述しておくと良いでしょう。type:'inline'});先ほどのリンク要素にmagnificPopup()を実行するだけです。【type】にはinlineを指定することで、任意のHTMLコンテンツをポップアップ表示することができるのです。他にも、画像や動画・埋め込み要素などをポップアップさせることも可能です。CodePen.0まとめ今回は、jQueryで説明文などをポップアップで表示する方法について学習しました!最後に、もう一度ポイントをおさらいしておきましょう!ポップアップ表示はCSSをjQueryで制御することで簡単に実現する画像のキャプション表示も基本はポップアップの実装と同じプラグインを活用するとより効率よくポップアップを自作できる上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。