menu

永遠少年症候群

ブログ

年/カテゴリー/タグを組み合わせて絞り込みできます。

ブログ

お題ルール

自作発言とお題の再配布は禁止いたします。お題を使用していることを明記してくだい。
他のお題配布サイト様のお題と混ぜることはおやめください。
あいうえお作文からの抜き出しはご遠慮ください。

同意してお題ページへ

小説ページ

ファンタジー、恋愛要素、ハッピーエンド多め。たまに暴力やグロテスクな表現があります。
filterボタンで絞り込みができます。キーワードとシリーズは組み合わせることができません。

小説ページへ

目次


広告

シンプルなleanmodalをスマホでも見やすく

 サイト改装にあたり、トップページとお題ページでモーダルウィンドウを多用しております。
 jqueryはleanModalを利用。シンプルで使いやすいです。

スクロールしたい問題

 ただ、スマホから見た時や長い文章の場合、固定しているのでスクロールしても読めない!
 jquery.leanModal.min.jsの中でポジションが指定されているので、fixedをabsoluteに変えます。

上に固定されて見えなくなる問題

 スクロールできるようになったけど、今度はスクロールした後に開いたモーダルウィンドウが短かったら上の方に表示されてしまって見えない!
 topはオプションで変更できるため、そこをどうにかしようにもクリックイベントでスクロール位置とって変数入れたらなぜか2回クリックしなきゃ反応しなかったりcssぶっこんで上書きはなんかこう……力技って感じで……。
 さっきもう既にいじってるし、オプションのtopは設定せずにjquery.leanModal.min.jsをいじることにしました。
 モーダルウィンドウのidをクリックイベントで拾っているため、その中でスクロール位置を取ってcssを設定している中のtopをスクロール位置+任意の数字+”pxにすればいいわけです。

あとは好みの問題

 使っていない変数が宣言されていたので消したらいいかも。
 それから、モーダルウィンドウの中央配置にleft:50%;を設定して、モーダルウィンドウの横幅の半分をmargin-leftでマイナスしているのですが、leftに画面の半分からモーダルウィンドウの横幅の半分を引いた数値を入れた方がcssとしてスマートじゃない?

以上を総合するとこうなる

 どこの部分なのか説明が面倒なので全文。MIT/GPLのため、上部の著作権表示は残してください。

 scrollTopの後ろに+100をつけていますが、スクロール上部から100pxの位置にきます。好きな数字に変更してください。
 オプションを直接してしまえば他にも減らせるところはありますが、とりあえずスマホでも見やすくするという目標は達成したので以上。

Do NOT follow this link or you will be banned from the site!