web-dev-qa-db-fra.com

Comment positionner la boîte de dialogue div popup au centre de l'écran du navigateur?

Je dois positionner div popup au centre de l'écran du navigateur (quelle que soit la taille de l'écran). Et je veux garder la position aussi absolue que je ne veux pas déplacer la popup quand je fais défiler la page.

Cette div est affichée lorsque le bouton est cliqué à l'aide de Jquery.

J'ai essayé de régler la marge gauche à la moitié de la largeur, comme mentionné dans d'autres publications, mais cela ne fonctionne pas pour moi.

Voici mon code

Code 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;
}

Code HTML:

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

Merci!!

csshtmlpositionpositioning
7
S K

Ici, ceux-ci fonctionnent. :)

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

upd: Juste au cas où jsfiddle ne répondait pas, voici le code ...
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

Vous pouvez utiliser CSS3 'transformer':

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>

* afin que vous n'ayez pas à utiliser margin-left: -width/2 px;

5
Alexander Ivashchenko

J'écris un code dans jQuery. Ce n'est pas vu comme un moyen facile. Mais j'espère que cela vous sera utile.

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

Remarque: cela ne répond pas directement à votre question. C'est délibéré.

A List Apart a un excellent CSS Positioning 101 article qui vaut la peine d'être lu ... plus d'une fois. Il contient de nombreux exemples qui incluent, entre autres, votre problème spécifique. Je le recommande fortement.

2
Peter Rowell

C’est un problème classique. Lorsque vous faites défiler la fenêtre contextuelle modale générée à l’écran, elle reste à sa place et ne la fait pas défiler. Il est donc possible que l’utilisateur soit bloqué car il pourrait ne pas voir la fenêtre contextuelle sur son écran visible.

Le lien suivant fournit également du code CSS uniquement pour générer une boîte modale avec sa position absolue.

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

2
Abhishek Jain

Il a fallu un certain temps pour trouver la bonne combinaison, mais cela semble centrer le contenu de superposition ou contextuel, horizontalement et verticalement, sans connaissance préalable de la hauteur du contenu :

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

Je pense que vous devez créer le .holderposition:relative; et le .popupposition:absolute;

0
Danferth

Une solution pour laquelle nous n'avons pas besoin de connaître la largeur/hauteur du dialogue et d'assumer les marges 

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