質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.77%

  • JavaScript

    9553questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

モーダルウィンドウをレスポンシブ対応させたい

解決済

回答 1

投稿 2017/08/12 22:27

  • 評価
  • クリップ 0
  • VIEW 206

tuckQ

score 40

前提・実現したいこと

leanModal.jsというプラグインを利用
モーダルウィンドウの表示位置を画面サイズに合わせて変えたい

該当のソースコード

下記コード5行目の「top: 100,」をスマホ表示時に「top: 20,」にしたいです。

◆ jquery.leanModal.min.jsのソース

(function ($) {
  $.fn.extend({
    leanModal: function (options) {
      var defaults = {
        top: 100,
        overlay: 0.5,
        closeButton: null
      };
      var overlay = $("<div id='lean_overlay'></div>");
      $("body").append(overlay);
      options = $.extend(defaults, options);
      return this.each(function () {
        var o = options;
        $(this).click(function (e) {
          var modal_id = $(this).attr("href");
          $("#lean_overlay").click(function () {
            close_modal(modal_id)
          });
          $(o.closeButton).click(function () {
            close_modal(modal_id)
          });
          var modal_height = $(modal_id).outerHeight();
          var modal_width = $(modal_id).outerWidth();
          $("#lean_overlay").css({
            "display": "block",
            opacity: 0
          });
          $("#lean_overlay").fadeTo(200, o.overlay);
          $(modal_id).css({
            "display": "block",
            "position": "fixed",
            "opacity": 0,
            "z-index": 11000,
            "left": 50 + "%",
            "margin-left": -(modal_width / 2) + "px",
            "top": o.top + "px"
          });
          $(modal_id).fadeTo(200, 1);
          e.preventDefault()
        })
      });

      function close_modal(modal_id) {
        $("#lean_overlay").fadeOut(200);
        $(modal_id).css({
          "display": "none"
        })
      }
    }
  })
})(jQuery);

試したこと

下記サイトを参考に自分なりに組み込んでみました。
https://idotdesign.net/blog/web/js/responsive-if-js/

leanModal: function (options) {
var windowWidth = $(window).width();
var windowSm = 480;
if (windowWidth > windowSm) {
      var defaults = {
        top: 100,
        overlay: 0.5,
        closeButton: null
      };
} else {
      var defaults = {
        top: 20,
        overlay: 0.5,
        closeButton: null
      };
}

問題

エラーなどは発生していないが、効果が得られずスマホでもTop:100のままで表示されます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

動くサンプル:https://jsfiddle.net/w8rnunj1/


とりあえず動いているようです。
viewportを入れ忘れているとかありませんか?

【もう逃げない。HTMLのviewportをちゃんと理解する - Qiita】
http://qiita.com/ryounagaoka/items/045b2808a5ed43f96607


あと、ライブラリの引数側で処理できるので、ライブラリ自体のコードを書き換えるのはやめておいたほうが良いです。

var arg = { top : 200, overlay : 0.4 }; // ここを画面幅で切り替えれば良い
$("#trigger_id").leanModal( arg );

投稿 2017/08/15 05:03

編集 2017/08/15 05:03

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2017/08/15 13:10

    ご指摘ありがとうございます。

    jsfiddleサンプルの正常動作も確認させていただきました。viewportは入れているので、原因がまだ分からないのですが、制作している実際のサイトが「http://jazztrigger.com/」になりまして、モーダル表示しているのが「レッスン内容」以下の「楽器」などのリンクになります。こちら見ていただけますでしょうか?

    ライブラリ自体の書き換えは避けた方がよいのですね、引数渡しての処理に変更できるよう勉強してみます。

    キャンセル

  • 2017/08/15 14:00

    そもそもどこにも実行するスクリプトを書かれていないと思いますが、どこに書かれていますか?

    キャンセル

  • 2017/08/15 22:49

    私の理解が不足しているかもしれませんが、実行スクリプトはindex.htmlの50〜56行目に書かれているものと思っております。

    キャンセル

  • 2017/08/15 23:12

    これは失礼しました。
    とりあえずChromeデベロッパーツールで問題なく動いているようです。動かないのはどの端末(及びOS)のどのブラウザ(及びバージョン)でしょうか。

    【Web関係者は知っておくべきGoogleChromeデベロッパーツールの使い方 | Ocadweb】
    http://ocadweb.com/web/googlechromedevelopertools

    多分関係はないですが、rel="leanModal"のa要素の中に閉じていないdiv要素があります。
    また、同じidが重複している箇所が多数あります。HTML中のidは重複できないため、classに変えるかidを重複しないように変える必要があります。

    キャンセル

  • 2017/08/16 22:43

    htmlに不備がたくさんあったようで失礼しました。divとid部分の修正をしたところ、iPhoneでうまく表示されるようになりました。ただ、Chromeのdevice toolbarでiPhone6などに設定してみてみるとtop100のままになっております。ちょっと気になりますが、一旦修正できたので、大変助かりました。いろいろアドバイスいただきありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.77%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    9553questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

閲覧数の多いJavaScriptの質問