2009-04-13 6 views
0

reddit registerボタンをクリックすると、素敵なウィンドウがポップアップし、画面の残りの部分が黒くなります。画面の残りの部分をクリックしてポップアップを閉じることができます。ログインフォームがポップアップすると、redditはバックグラウンド全体を黒くしますか?

私はこのために一番外側のdivを使うことができると知っていますが、それはどのようにredditが行いますか?彼らはその場でその外側のdivの属性も変更していますか?

+0

FirebugまたはIE Dev Toolbarで調べてみるべきです。このことは、特定の効果を得るためにどのようなCSSを使用しているかを正確に伝えます。 – Joel

答えて

0

これらは、thickboxと同様のプラグインを使用しています。

+0

どちらを使用していますか? – mrblah

1

彼らは、次の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を。

スティーブ

+0

しかし、divはドキュメント全体に広がっているようには見えませんか? – mrblah

7

この技術は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を持っている、しかし、あらゆることを考慮、あなたは、このようなThickboxjqModalとしてすでにこのために作られた多くのプラグイン、のいずれかを使用したいとしています。

関連する問題