シンプルなleanmodalをスマホでも見やすく
サイト改装にあたり、トップページとお題ページでモーダルウィンドウを多用しております。
jqueryはleanModalを利用。シンプルで使いやすいです。
スクロールしたい問題
ただ、スマホから見た時や長い文章の場合、固定しているのでスクロールしても読めない！
jquery.leanModal.min.jsの中でポジションが指定されているので、fixedをabsoluteに変えます。
上に固定されて見えなくなる問題
スクロールできるようになったけど、今度はスクロールした後に開いたモーダルウィンドウが短かったら上の方に表示されてしまって見えない！
topはオプションで変更できるため、そこをどうにかしようにもクリックイベントでスクロール位置とって変数入れたらなぜか２回クリックしなきゃ反応しなかったりcssぶっこんで上書きはなんかこう……力技って感じで……。
さっきもう既にいじってるし、オプションのtopは設定せずにjquery.leanModal.min.jsをいじることにしました。
モーダルウィンドウのidをクリックイベントで拾っているため、その中でスクロール位置を取ってcssを設定している中のtopをスクロール位置+任意の数字+”pxにすればいいわけです。
あとは好みの問題
使っていない変数が宣言されていたので消したらいいかも。
それから、モーダルウィンドウの中央配置にleft:50%;を設定して、モーダルウィンドウの横幅の半分をmargin-leftでマイナスしているのですが、leftに画面の半分からモーダルウィンドウの横幅の半分を引いた数値を入れた方がcssとしてスマートじゃない？
以上を総合するとこうなる
どこの部分なのか説明が面倒なので全文。MIT/GPLのため、上部の著作権表示は残してください。
|
1 2 3 4 |
// leanModal v1.1 by Ray Stone - http://finelysliced.com.au // Dual licensed under the MIT and GPL (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 scrollTop = $(window).scrollTop() + 100;var width = $(window).width() / 2 - $(modal_id).width() / 2; $("#lean_overlay").css({"display": "block", opacity: 0});$("#lean_overlay").fadeTo(200, o.overlay);$(modal_id).css({"display": "block", "position": "absolute", "opacity": 0, "z-index": 11000, "top": scrollTop + "px", "left": width + "px"});$(modal_id).fadeTo(200, 1); e.preventDefault()}) });function close_modal(modal_id) { $("#lean_overlay").fadeOut(200);$(modal_id).css({"display": "none"})}}})})(jQuery); |
scrollTopの後ろに+100をつけていますが、スクロール上部から100pxの位置にきます。好きな数字に変更してください。
オプションを直接してしまえば他にも減らせるところはありますが、とりあえずスマホでも見やすくするという目標は達成したので以上。