web-dev-qa-db-ja.com

divポップアップダイアログをブラウザ画面の中央に配置する方法は？

Divポップアップをブラウザ画面の中央に配置する必要があります（画面のサイズに関係なく）。そして、ページを下にスクロールするときにポップアップを下に移動したくないので、絶対位置を維持したいです。

このdivは、Jqueryを使用してボタンをクリックすると表示されます。

他の投稿で述べたように、マージン左を幅の半分に設定しようとしましたが、うまくいきません。

ここに私のコードがあります

CSSコード：

.holder{        
    width:100%;
    position:absolute;
    left:0;
    top:0px;
    display:block;  
}
.popup{
    width:800px;
    margin:0 auto;
    border-radius: 7px;
    background:#6b6a63;
    margin:30px auto 0;
    padding:6px;
}

.content{
    background:#fff;
    padding: 28px 26px 33px 25px;
}

HTMLコード：

  <div class="holder">
        <div id="popup" class="popup">            
            <div class="content">
                        some lengthy text
                     </div>
        </div>
   </div>

ありがとう!!

csshtmlpositionpositioning
7
S K

ここで、これは動作しています。 :)

http://jsfiddle.net/nDNXc/1/

upd：jsfiddleがここで応答しない場合に備えて、コードは...
CSS：

.holder{        
    width:100%;
    display:block;
}
.content{
    background:#fff;
    padding: 28px 26px 33px 25px;
}
.popup{
    border-radius: 7px;
    background:#6b6a63;
    margin:30px auto 0;
    padding:6px;  
    // here it comes
    position:absolute;
    width:800px;
    top: 50%;
    left: 50%;
    margin-left: -400px; // 1/2 width
    margin-top: -40px; // 1/2 height
}

HTML：

<div class="holder">     
    <div id="popup" class="popup">            
        <div class="content">some lengthy text</div>
    </div>
</div>
17
Jassi
.popup-content-box{
    position:fixed;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
}
19
Nikhil Mathew

CSS3 'transform'を使用できます：

CSS：

.popup-bck{
  background-color: rgba(102, 102, 102, .5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.popup-content-box{
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 11;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

HTML：

<div class="popup-bck"></div>
<div class="popup-content-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div>

*したがって、margin-left: -width/2 px;を使用する必要はありません

5
Alexander Ivashchenko

Jqueryでコードを書きます。簡単な方法は見られません。しかし、それがあなたに役立つことを願っています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">

.popup{
    border: 4px solid #6b6a63;
    width: 800px;
    border-radius :7px;
    margin : auto;
    padding : 20px;
    position:fixed;
}

</style>

<div id="popup" class="popup">
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
    var popup_height = document.getElementById('popup').offsetHeight;
    var popup_width = document.getElementById('popup').offsetWidth;
    $(".popup").css('top',(($(window).height()-popup_height)/2));
    $(".popup").css('left',(($(window).width()-popup_width)/2));
});
</script>
5
FURKAN ILGIN

注：これはあなたの質問に直接答えるものではありません。これは意図的なものです。

A List Apart には優れたものがあります CSS Positioning 101 読む価値のある記事... 2回以上。特に、特定の問題を含む多数の例があります。強くお勧めします。

2
Peter Rowell

画面に生成されたモーダルポップアップをスクロールすると、その場所に留まりスクロールしないため、表示可能な画面にポップアップが表示されないため、ユーザーがブロックされる可能性があります。

次のリンクでは、モーダルボックスとその絶対位置を生成するためのCSSのみのコードも提供しています。

http://settledcuriosity.wordpress.com/2014/10/03/centering-a-popup-box-absolutely-at-the-center-of-screen/

2
Abhishek Jain

適切な組み合わせを見つけるにはしばらく時間がかかりましたが、これはオーバーレイまたはポップアップコンテンツを水平および垂直の両方で中央に配置しているようですコンテンツの高さに関する予備知識なし：

HTML：

<div class="overlayShadow">
    <div class="overlayBand">
        <div class="overlayBox">
            Your content
        </div>
    </div>
</div>

CSS：

.overlayShadow {
    display: table;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 20;
}

.overlayBand {
    display: table-cell;
    vertical-align: middle;
}

.overlayBox {
    display: table;
    margin: 0 auto 0 auto;
    width: 600px; /* or whatever */
    background-color: white; /* or whatever */
}
1
Giorgio Barchiesi

.holderposition:relative;および.popupposition:absolute;を作成する必要があると思います

0
Danferth

ダイアログの幅/高さを知る必要がなく、マージンを想定するソリューション。

HTML：

<div id="dialog-contain">  <-- This div because I assume you might have a display that is not a flex. '
    <div id="block">
        <div id="centered">
            stuffs
        </div>
    </div>
</div>

Css：

#dialog-contain { // full page container.
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    ...
}

#block {  // another container simply with display:flex.
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
}

#centered {   // another container that is always centered.
    align-self: center;
}
0
rjbaj