Как расположить всплывающее диалоговое окно div в центре экрана браузера?

мне нужно расположить div popup в центре экрана браузера (независимо от размера экрана). И я хочу сохранить позицию абсолютной, поскольку я не хочу перемещать всплывающее окно вниз, когда я прокручиваю страницу.

этот 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>

спасибо!!

7
css html position positioning

9 ответов

вот, это работает. :)

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
.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%);
}
18

Я пишу код в 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

вы можете использовать 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

Примечание: это не дает прямого ответа на ваш вопрос. Это преднамеренно.

Список Только отличная CSS позиционирование 101 статья, которую стоит прочитать ... не раз. Он имеет множество примеров, которые включают, среди прочего, вашу конкретную проблему. Очень рекомендую.

2

Это классическая проблема, когда вы прокручиваете модальное всплывающее окно, сгенерированное на экране, остается на своем месте и не прокручивается, поэтому пользователь может быть заблокирован, поскольку он может не видеть всплывающее окно на своем видимом экране.

следующая ссылка также предоставляет CSS только код для генерации модального поля вместе с его абсолютной позицией.

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

2

потребовалось некоторое время, чтобы найти правильную комбинацию, но это, похоже, центрирует наложение или всплывающее содержимое, как по горизонтали, так и по вертикали,без предварительного знания высоты содержимого:

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

Я думаю, вам нужно сделать .holder position:relative; и .popup position:absolute;

0

одно решение, в котором нам не нужно знать ширину / высоту диалога, а затем принять поля.

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