「正しい」とは何ですか？
定義上、モーダルウィンドウは、ユーザーが閉じるまでユーザーの親ウィンドウでの作業をブロックします。 それは：
- ユーザーがページの下をスクロールすることを許可しないでください。
- 同時に、モーダルウィンドウに多くのコンテンツがある場合は、コンテンツをスクロールさせる必要があります。
この原則により、FacebookおよびVkontakteで写真を表示することは機能します。モーダルウィンドウの場合、これが正しいオプションだと思います。
実装の詳細を事前に苦しめないために、最初にjQueryプラグインのデモを示します ： http : //rmcreative.ru/playground/modals_plugin/demo.html
さて、実装について少し説明します。
アイデアは非常に簡単です。 オープン状態では、マークアップは次のようになります。
<html> <head> ... </head> <body class="lock"> <div class="shim"> <div class="modal"> ... <h1>Hi, I'm the modal demo.</h1> ... </div> </div> ... </body> </html>
CSSが適用されます：
/* . body, IE — html */ .lock { /* */ overflow: hidden; } /* ( ) */ .shim { /* , */ position: fixed; bottom: 0; left: 0; top: 0; right: 0; /* , */ overflow: auto; /* iPad*/ -webkit-overflow-scrolling: touch; } /* iPad */ .shim > * { -webkit-transform: translateZ(0px); } /* : */ .shim { background: rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6–IE8 */ zoom: 1; }
以上です。 ESCで閉じるなどのバンを使用して追加するのに便利なjQueryプラグインでラップします。 このAPIでプラグインを取得しました：
$.modal().open({ onOpen: function(el, options){ $.get('http://example.com/', function(data){ el.html(data); }); } });
githubで取得できます。
現時点では、コミュニティが修正に役立つことを願う多くの悪いことがあります：
- FFでのキーボードスクロールは、モーダルウィンドウの代わりにページをスクロールします。
- iPadでは、スクロールは非常に安定して動作しません（ページをスクロールすることもあります）。
- マウスの中央ボタンを押してスクロールすると、正しく機能しません。
- モーダルウィンドウを開くと、スクロールが表示されたり削除されたりした場合にページが移動します。
建設的な批判とアドバイスは大歓迎です。