Popup」を紹介します。RWD対応ポップアップのプラグインはいくつかありますが、Android2系で正常に動作しないものも多く、まともに使えるのが結構少ないです。そんな中、今のところこれが一番安定して動作するため気に入ってよく使っています。Popupの特徴ポップアップというと、一般的な画像の拡大から、フォームのポップアップ、スマホメニューのポップアップ、アラートのポップアップなど、普段から実装の機会が多数あると思います。Popupは、インライン、ギャラリー、Youtube、GoogleMap、フォーム、Ajax、アニメーション、など様々なタイプのポップアップを簡単に実装することができます。Retinaにも対応。デスクトップは各ブラウザ最新版とIE8以上、IE7は一部レイアウトが対応していないものの、基本的には使えるようです。モバイルはAndroid2.3以上、iOS5以上で使えます。現場で出番が多いのはインラインタイプのポップアップです。インラインタイプは同じファイル内の別の場所に記述したHTMLをポップアップで表示させるというものですが、CSSがシンプルで柔軟に変更できるため、矢印やcloseボタン、背景、細かい余白の調整など、指定された任意のデザインへの変更も簡単に対応できるというのが採用の決め手です。オプションも多数あり、やりたいことは大体網羅されています。Popupは他に比べてバグが発生するケースがかなり少ない印象です。)また、フォトギャラリーもデザインが割とシンプルで操作もしやすいため、特にこだわったデザイン指定がない場合にはよくデフォルトのままで使っています。ライセンスはMITとなっているようです。動作に問題があったらこちらのフォーラムを参考に。PopupのJSを読み込み、HTMLを設置するだけ、簡単です。content</div>背景用のCSSを別途追加。下記はサンプルとしての指定ですが、どんなデザインでも対応可能です。Popupの小技クリック後に時間差でポップアップクリックした後に少し時間を置いてからポップアップしたい、というケースには次のようにして対応できます。Popupは、デフォルトで×印の閉じるボタンが表示されますが、これをカスタマイズするケースがよくあります。カスタマイズする方法は二通りあり、CSSを変更するのみで対応するか、閉じるボタンそのものを別に作って置き換えるか、いずれかになります。CSSの変更は、magnific-popup.cssを修正または上書きすればOKですが、後者の場合は下記のように「mfp-close」というclassを好きな要素に設定するだけで対応できます。複数設置、画像も可能です。class="mfp-close">画面を閉じる</div>また、下記のようにオプションのshowCloseBtnをfalseに設定すれば、閉じるボタン自体を非表示にすることも可能です。Popupはデフォルトで、閉じるボタンをクリックしなくても、ポップアップした要素以外(オーバーレイの部分)をクリックするとポップアップを閉じるようになっています。これを無効にするためには、下記のようにオプションのcloseOnBgClickをfalseに設定すればOKです。});});逆に、ポップアップした部分をクリックするだけで閉じる、という動作もcloseOnContentClickをtrueにすることで設定可能です。画像だけをポップアップする時などに使うといいかもしれません。Ajaxで別ファイルのHTMLを読み込む更新管理やシステム上の都合などで、一つのファイルに全てのHTMLを詰め込みたくないケースがあると思います。Policyに基づく)。Ajaxでの読み込みは下記のように設定します。});});HTML側は下記のとおりです。この場合、「popup」というclassがついたリンクをクリックすると、同階層のpage.htmlの中身がポップアップで表示されます。Typeを利用する時、閉じるボタンやオーバーレイ部分だけでなく、ポップアップした要素をクリックしただけでポップアップが閉じてしまうことがあります。いった場合には、下記のようにひとつの要素で包み込むようにすると解決します。Popupは、現場でとても役立つプラグインです。制作時間の短縮に活用してみてください。Responsively」デベロッパーツールでのスマホ確認の裏ワザとクラウド実機テスト上場企業100社のレスポンシブWebデザイン対応状況を調査しましたWordPressテーマAvadaのフォント設定のコツTweetPocketレスポンシブWebデザインSNSでもご購読できます。TwitterでフォローするFeedlyでフォローするいしかわモバイルフレンドリーラボのWebデザイナー兼ディレクターです。初心者にも分かりやすい記事を心がけてます。