reddit registerボタンをクリックすると、素敵なウィンドウがポップアップし、画面の残りの部分が黒くなります。画面の残りの部分をクリックしてポップアップを閉じることができます。ログインフォームがポップアップすると、redditはバックグラウンド全体を黒くしますか?
私はこのために一番外側のdivを使うことができると知っていますが、それはどのようにredditが行いますか?彼らはその場でその外側のdivの属性も変更していますか?
reddit registerボタンをクリックすると、素敵なウィンドウがポップアップし、画面の残りの部分が黒くなります。画面の残りの部分をクリックしてポップアップを閉じることができます。ログインフォームがポップアップすると、redditはバックグラウンド全体を黒くしますか?
私はこのために一番外側のdivを使うことができると知っていますが、それはどのようにredditが行いますか?彼らはその場でその外側のdivの属性も変更していますか?
彼らは、次のCSS properiesとdiv
要素を作成:それはdiv
オーバーレイの上に表示されるように、その後1001
にそのz-index
セットを持って、ログインボックスの
/* Makes div cover page */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Puts div over all other elements on page */
z-index: 1000;
/* Fills the div with a solid colour */
background-color: gray;
/* Makes div partially see-through */
opacity: 0.7;
div
を。
スティーブ
しかし、divはドキュメント全体に広がっているようには見えませんか? – mrblah
この技術はoverlay
として知られており、実装するのは非常に簡単です:
#overlay {
position: fixed;
z-index:103;
top: 0px;
left: 0px;
height:100%;
width:100%;
background-color: gray;
opacity: 0.7;
}
それを示すの完全な行為がmodal windowとして知られています。
Check out a live sample of the CSS above。
フォームと、このようなフローティングDIVを持っている、しかし、あらゆることを考慮、あなたは、このようなThickboxやjqModalとしてすでにこのために作られた多くのプラグイン、のいずれかを使用したいとしています。
FirebugまたはIE Dev Toolbarで調べてみるべきです。このことは、特定の効果を得るためにどのようなCSSを使用しているかを正確に伝えます。 – Joel