Pageの中央にDIVが開かれたときにスクロールすることができないという正しい方法は何ですか? [複製] -- javascript フィールド と jquery フィールド と html フィールド と css フィールド 関連 問題

What's the right way to unable scrolling when a div is opened in the center of my page? [duplicate]












0
vote

問題

日本語

私は私のウェブサイトの私の連絡先フォームにポップアップdivを作成しました。

現在のHTML:

<事前> <コード> <div class="contact_form"> <div class="form_container"> </div> </div>

そしてこれは私のCSSです:

<事前> <コード> .contact_form{ display : none; width : 100%; height : 100%; background : rgba(0, 0, 0, 0.7);; position : absolute; top : 0; left : 0; } .contact_form .form_container{ background-image: url('images/popup-post-it_2.png'); background-size: 100%; background-repeat: no-repeat; display: block; width: 33.4em; z-index: 1001; position: fixed; top: 22%; left: 34%; padding-left: 10px; margin: auto; height: 33em; }

2問題:

  • 私はページをスクロールすることができます - そして私はそれをすることができないはずです。
  • スクロールしたとき - ".form_container"と一緒にスクロールします。

JavaScriptを使用してそれを無効にする方法を知っていますが、過去の実験からそれを間違って見つけて、物事を乱雑にします。

これを行うためのよりエレガントな方法は、CSSを使用していますか?

> http://jsfiddle.net/246m2u8y/21/

英語

I have created a pop-up div for my contact form in my website.

this is the current HTML:

<div class="contact_form">      <div class="form_container">     </div>  </div>  

and this is my CSS:

.contact_form{     display    : none;     width      : 100%;      height     : 100%;     background : rgba(0, 0, 0, 0.7);;     position   : absolute;     top        : 0;     left       : 0; }  .contact_form .form_container{     background-image: url('images/popup-post-it_2.png');     background-size: 100%;     background-repeat: no-repeat;     display: block;     width: 33.4em;     z-index: 1001;     position: fixed;     top: 22%;     left: 34%;     padding-left: 10px;     margin: auto;     height: 33em; } 

2 problems:

  • I can scroll the page - and I shouldn't be able to do that.
  • when I scroll - the ".form_container" scrolls with me.

I know how to disable it using javascript, but I find it wrong from past experiments, makes things messy.

Is there a more elegant way to do this, maybe using CSS ?

http://jsfiddle.net/246m2u8y/21/

</div
           
         
         

回答リスト

2
 
vote
vote
ベストアンサー
 

私は DropboxがWebサイトで何をしたかを提案します。 (「サインイン」をクリックした後)

スクロールバーを維持しますが無効にします。このようにして、スクロールバーを取り外しながらページは「ジャンプ」し、それはずっと良く見えるでしょう。

スクロールバーを取り外すとき、サイトの中心の要素は自分の位置を再計算し、あなたが見ることができるように理想的なウェブサイトで「ちらつき」または「ジャンプ」を引き起こすことができますこの例では、この他の1つスクロールバーは静止しています。

自分のアプローチを見ている場合、それらはそれのためにBody要素にクラスを追加することに気付くでしょう。 あなたはこれを行うことができます:

<事前> <コード> $('.demo').click(function(){ $('html').addClass('noscroll'); });

とそれのためのCSS:

<事前> <コード> html.noscroll{ position: fixed; width: 100%; top:0; left: 0; height: 100%; overflow-y: scroll !important; z-index: 10; }

デモOnline

 

I would suggest what dropbox did in their website. (after clicking in "Sign in").

They keep the scrollbar but disabled it. This way, the page won't "jump" while removing the scrollbar and it would look much better.

When removing the scrollbar, the centered elements of the site have to recalculate their position and they get moved causing a "flicker" or a "jump" in the website which is far from ideal as you can see in this example in comparison with this other one in which the scroll bar stills visible.

If you take a look at their approach you will notice they add a class to the body element for it. You can do it in this way:

$('.demo').click(function(){     $('html').addClass('noscroll'); }); 

And the css for it:

 html.noscroll{     position: fixed;     width: 100%;     top:0;     left: 0;     height: 100%;     overflow-y: scroll !important;     z-index: 10;  } 

Demo online

</div
 
 
       
       
0
 
vote

ポップアップが開くときには、固定を設定するために本体にクラスを設定するだけです。

<事前> <コード> TypeConverter0

更新されたfiddle 。

 

When the popup opens you only have to set a class on the body to set it fixed:

body.popup-visible {     position   : fixed;     width: 100%;     height: 100%; } 

See the updated fiddle.

</div
 
 

関連する質問

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...

8  GeckoベースのブラウザのCSSテーブルセルの境界線を消す  ( Disappearing css table cell borders in gecko based browsers ) 
私はヤモリのバグを明らかにするように思われる非常に具体的なHTMLテーブルの構築物を持っています。 これは問題の蒸留版です。 Geckoベースのブラウザ(たとえば、FFなど)の次の表を守ってください。(これをコピーして新しいファイルに貼り付ける必要があります)...

0  背景イメージFirefox3のぼかし  ( Background image blurs in firefox3 ) 
Backgroundプロパティを使用してHTMLページで画像を使用すると、IEではLOKS FYNSがFirefoxでぼやけます。ワットは可能な解決策かもしれません。 ありがとう、 ...

0  LazyWeb:要素の訪問されたクラスに基づいてLI要素を削除するJavaScriptが必要  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
すでにクリックしたように、必要なデータがたくさんあるこのページを持っていますが、頻繁に青色を探す必要があるので、頻繁に繰り返されます。私はこれがより効率的かもしれないことに気づいて、それが含まれているリンクが訪問されたかどうかに基づいて要素を隠されたように設定...

4  連続文字列はTDで包まれていない  ( Continuous string not getting wrapped in td ) 
固定幅TDに長い連続文字列を置くと、ラップされていません。文字列は私のテーブルの幅を増加させます。誰でも私を助けてください。 例えば: これは私のテキストです - TD幅のようにうまく機能します。 しかし、挿入した場合は ThisISistyText ---...

5  CSSのテーブルを垂直方向に揃える方法  ( How to vertically align a table in css ) 
画面の途中でテーブルをCSS?に垂直に揃える方法 ...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

1  Easy CSSカスタマイズのためのHTMLを設計するためのガイドライン  ( Guidelines for designing html for easy css customization ) 
SaaSプロジェクトをしています、そして、私たちは「彼の」WebサイトのためにCSSページをアップロードできるようにします。 (実際には、すべての顧客のサイトは仮想ホスティングを使用して私たちがホストされています)。 CSSを適用できるように、ページのHT...

76  ハイフンのような特殊文字の後に単語を破る方法( - )  ( How to break word after special character like hyphens ) 
比較的単純なCSS: <コード> div { width: 150px; } <コード> <div> 12333-2333-233-23339392-332332323 </div> 文字列が width に制約される...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有