サイズの大きなモーダルをスクロール可能にする方法


最近良く見かけるモーダルウィンドウですが、
モーダルのサイズが大きいと画面外にはみ出してしまい、全てを表示することが出来ません。
スクロールしたとしても、モーダルの背景であるメインコンテンツがスクロールされてしまいます。

そこで、モーダルが表示されている間のスクロール対象を、背景のメインコンテンツではなく、
モーダル自身に与えてあげることで、画面外に広がったモーダルコンテンツを全て表示することが可能です。

今回は、そんなスクロール可能なモーダルを手軽に構築する方法を解説します。

また、そんなモーダルをスクロール可能にする一連の処理を
jQueryのプラグインとして作成しましたので、宜しければお使い下さい。

  1. 一般的なモーダルの実装
  2. 一般的なモーダルの問題点
  3. 大きいモーダルを扱うサイト
  4. スクロール可能なモーダルの考え方
  5. jQueryモーダルプラグインの使い方
  6. jQueryモーダルプラグインのソース

『サイズの大きなモーダルをスクロール可能にする方法』を続きを読む »

2014年6月のツイート履歴

  • Swift言語の簡易リファレンスを纏めたチートシートhttp://cdn2.raywenderlich.com/wp-content/uploads/2014/06/RW-Swift-Cheatsheet-0_3.pdf
    15:38
  • #Swift Appleが公表した新プログラミング言語「Swift」についての資料を日本語化するプロジェクト https://github.com/swift-jp/swift-guide
    15:14
  • 2014年5月のツイート履歴 http://web-terminal.blogspot.jp/2014/06/20145.html?utm_source=dlvr.it&utm_medium=twitter
    11:09
  • 「Mozc for Android」にてAndroid用のカスタムキーボードを作成することが可能です。その際の開発環境として、ビルドはLinux上で行う必要があります(「Ubuntu 12.04」が理想)
    12:06
  • ApacheのTimeoutを0にて無制限としてもタイムアウトされてしまう場合は、max_input_timeの値を確認しましょう。Maximum execution time of 0 seconds exceeded in
    18:56
  • PHPのset_time_limit()や、php.iniのmax_execution_timeをhtaccessやphp.iniで直接設定してもタイムアウトが効かない場合は、ApacheのTimeoutやKeepAliveTimeoutの値も確認しましょう。
    16:50
  • LinuxのUbuntuにて、システムをシャットダウンする場合のコマンドは「sudo shutdown -h now」。再起動する場合のコマンドは「sudo shutdown -r now」です。
    13:57
  • Googleがビジネスオーナー向けの新しいサービスを開始「Google マイ ビジネス」 http://www.google.co.jp/business/?gmbsrc=jp-ja-et-pr-z-gmb-s-214-h~gb%7Cintl%7Cu&ppsrc=GMBB0&utm_campaign=jp-ja-et-pr-z-gmb-s-214-h~gb%7Cintl%7Cu&utm_source=gmb&utm_medium=et
    12:19
  • Twitterにおいて、再びGIFアニメが使用出来る様になりました。http://www.itmedia.co.jp/news/articles/1406/19/news038.html
    10:52
  • 〔隠しコマンド〕Web版Twitterの検索窓でキーボードの↑↑↓↓←→←→BA(通称コナミコマンド)を打つと、上部のツイッターアイコンが回転します。
    12:43
  • マイクロソフトは開発者向けに、リリース前のIEをダウンロードすることの出来る「IE Developer Channel」を公開しました。http://devchannel.modern.ie/
    11:12
  • Googleの検索結果に表示される著者画像とGoogle+のフォロワー数は、モバイルを意識した改革の為に廃止となります。http://www.suzukikenichi.com/blog/no-more-pictures-in-authorship/
    16:21

人気の投稿

Category

Algorithm (2) Android (8) ASP/aspx (1) Blogger (2) C/C++ (1) Chrome (5) CSS (9) Firefox (4) Fortran (1) Google (9) GoogleMap (2) HTML (12) IE (3) Information (4) iOS (2) iPhone/iPad/iPod (2) Java (6) JavaScript (16) jQuery (9) JSP (1) LifeRecipe (5) Linux (2) Macintosh (2) MapKit (4) Marketing (7) MySQL (3) NAMAZU (2) Objective-C (7) Other (7) Perl (1) PHP (9) Python (1) RSS/Atom (2) Ruby (1) Safari (2) SEO (11) Smarty (2) SQL (2) Tex (1) Three.js (1) Twitter (1) TwitterLog (313) UIKit (5) Unix (1) VBA/VBS (1) Windows (5) WordPress (3) Writing (5) XAMPP (1) XML (1) Yahoo (2) ZendFramework2 (14)