it-swarm.com.ru

Как поместить всплывающее диалоговое окно 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>

Спасибо!!

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
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