質問編集履歴

1 質問内容がわかりにくかったため

ma.sa

ma.sa score 11

2018/04/16 11:47  投稿

### 前提・実現したいこと
レスポンシブ対応のポップアップ機能を実装したいと思いmagnific popupを設置しました。
動かすことはできたのですが、縦長の画像の表示が小さくなるので、
横幅のみ伸縮して、高さは画面からはみ出してもよいので、
下の方はスクロールで見れたらよいなと思いました、が、
カスタマイズの方法がよくわかりませんでした。
(以前違う質問をしたのですが、内容がわかりににくく、回答が得られませんでしたので、質問内容を変更しました。申し訳ございません。)
magnific popupのカスタマイズ方法をアドバイスしていただければと存じます。
レスポンシブ対応のポップアップ機能を実装したいと思いmagnific popupかcolorbox.jsを検討しています。
もしくは、違うプラグインでよいものがありましたらご紹介いただければ嬉しいです。
どうぞよろしくお願いいたします。
表示したい主な内容は、外部HTMLです。
どちらのプラグインも設置まではできましたが、同じ問題でつまずいています。  
### 試したこと
それはポップアップしたときに、背景が固定されず、スクロールしてしまうことです。
背景がスクロールしてしまうことでポップアップも一緒に動いてしまうので、
できれば、ポップアップしている間は背景を固定したいです。
cssを確認してみましたが、該当箇所がよくわかりませんでした。
この辺りではないかと予想はしたのですが・・・
スマホ(iphone/android)でも同様に固定できればと思っています。
```css
img.mfp-img {
 width: auto;
 max-width: 100%;
 display: block;
 height: auto;
 line-height: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding: 40px 0 40px;
 margin: 0 auto; }
magnific popupかcolorbox.jpで、実現可能な方を採用して制作を進めていきたいと思いますが、他のプラグインなどございましたらご提案いただけたらと思います。
```
ぜひアドバイスよろしくお願い致します。
  • jQuery

    13091 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    817 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る