###前提・実現したいこと
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のままで表示されます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/15 04:10
2017/08/15 05:00
2017/08/15 13:49
2017/08/15 14:12
2017/08/16 13:43