web-dev-qa-db-fra.com

comment puis-je centrer javascript css popup div, quelle que soit la résolution de l'écran?

J'ai le code suivant qui ouvre une nouvelle fenêtre contextuelle tout en désactivant l'arrière-plan, le problème est que je dois le positionner de sorte qu'il soit 100 pixels du haut (déjà obtenu via le CSS #dialog) et également au centre de l'écran , peu importe la résolution de l'utilisateur?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript">
        function showPopUp(el) {
            var cvr = document.getElementById("cover")
            var dlg = document.getElementById(el)
            cvr.style.display = "block"
            dlg.style.display = "block"
            if (document.body.style.overflow = "hidden") {
                cvr.style.width = "1024"
                cvr.style.height = "100%"
            }
        }
        function closePopUp(el) {
            var cvr = document.getElementById("cover")
            var dlg = document.getElementById(el)
            cvr.style.display = "none"
            dlg.style.display = "none"
            document.body.style.overflowY = "scroll"
        }
    </script>
    <style type="text/css">
        #cover {
            display:        none;
            position:       absolute;
            left:           0px;
            top:            0px;
            width:          100%;
            height:         100%;
            background:     gray;
            filter:         alpha(Opacity = 50);
            opacity:        0.5;
            -moz-opacity:   0.5;
            -khtml-opacity: 0.5
        }

        #dialog {
            display:    none;
            left:       100px;
            top:        100px;
            width:      300px;
            height:     300px;
            position:   absolute;
            z-index:    100;
            background: white;
            padding:    2px;
            font:       10pt tahoma;
            border:     1px solid gray
        }
    </style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
    My Dialog Content
    <br><input type="text">
    <br><input type="button" value="Submit">
    <br><a href="#" onclick="closePopUp('dialog');">[Close]</a>
</div>
<a href="#" onclick="showPopUp('dialog');">Show</a>

</body>
</html>
javascriptcsspopup
11
user1227914

Basé sur CSS solution au centre:

Vous devez utiliser ces styles pour qu'il apparaisse comme centre mort:

position:absolute;
top:50%;
left:50%;
width:400px;  /* adjust as per your needs */
height:400px;   /* adjust as per your needs */
margin-left:-200px;   /* negative half of width above */
margin-top:-200px;   /* negative half of height above */

Donc position devrait être spécifié. top et left devraient être 50%. Le margin-left et le margin-top doivent être négatifs respectivement à la moitié de la largeur et de la hauteur de la boîte. 

Notez que si vous souhaitez que votre popup apparaisse au centre même lorsque la page défile, vous devrez utiliser position:fixed à la place du tirage au sort qu'il ne fonctionne pas dans IE6.

37
Sarfraz

Ce dont vous avez besoin s'appelle une boîte à lumière .

Pour le créer, vous devez modifier le code HTML, CSS et JS.

Supposons que votre visionneuse ne contienne que la chaîne "formulaire de connexion". (Vous pouvez y mettre tout ce que vous voulez) Le code HTML devrait ressembler à ceci:

<div id = "loginBox">login form</div>

Maintenant, nous devons le cacher avec CSS:

div#loginBox {
    display: none;
}

Maintenant, notre boîte n'est pas visible. Permet de modifier notre boîte comme vous voulez qu'elle soit 100 pixels du haut:

div#loginBox {
    display: none;
    top: 100px;
}

Nous nous inquiétons de la désactivation de l'arrière-plan plus tard.

Notre prochain travail consiste à créer un bouton qui affichera la boîte lorsque nous en aurons besoin. Peasy facile:

<div id = "loginBox" >login form</div>
<a id = "displayButton">login</a>

Notez que nous n’avons pas besoin de l’attribut "href", car cela déplacera l’écran en cas de clic et d’autres comportements indésirables. 

Attachons le gestionnaire d'événement sur le bouton via JS:

var IE = document.all ? true : false; // obligatory "browser sniffing"

function display_box() {
    document.getElementsById("loginBox").style.display = "inline-block"; // or "inline" 
}

window.onload = function() {
    var login_box = document.getElementsById("loginBox");
    if (!IE) {
        login_box.addEventListener( "click", display_box , false );
    }
    else {
        login_box.attachEvent( "onclick", display_box );
    }
}

Mais vous voulez que ce soit au centre de l'écran? Ensuite, la fonction va comme ceci:

function display_box() {
    var theBox = document.getElementsById("loginBox").style,
        left = document.width / 2 - 50;   // 150 because it is 300 / 2

    theBox.display = "inline-block";
    theBox.left = left.toString() + "px";
}

J'imagine que vous voudrez peut-être fermer la fenêtre à un moment donné et créer l'effet "d'arrière-plan désactivé". Pour ce faire, vous pouvez créer une classe div qui s’étend sur l’ensemble de l’écran, associez-y un événement "display", insérez un z-index dans le css pour vous assurer que la loginBox se trouve sur "l'arrière-plan désactivé", puis associez un fermez l'événement "loginBox" sur le div "background". Et maintenant, le code final ressemble à ceci:

Notez que nous nous soucions seulement de l'emplacement du bouton login, car les autres sont cachés, puis modifiés par JS:

HTML:

<div id = "loginBox" >login</div>
<a id = "displayButton">login</a>
<div id = "backgroundDarkener"> </div>

CSS:

div#loginBox {
    display: none;
    top: 100px;
    width: 300px; #it is important to know the width of the box, to center it correctly
    z-index: 2;
}
div#backgroundDarkener {
    background: #000;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.8; 
    # needless to say, you should play with opacity or if you want your
    # css to validate - background image (because I suspect it won't 
    # validate for old versions of IE, Safari, etc.) This is just a suggestion
}

JS:

var IE = document.all ? true : false; // obligatory "browser sniffing"

function display_box() {
    var theBox = document.getElementsById("loginBox").style,
        background = document.getElementsById("loginBox").style,
        left = document.width / 2 - 150;   // 150 is 300 / 2

    theBox.display = "inline-block";
    theBox.left = left.toString() + "px";
    background.display = "inline-block";
}
function hide_box() {
    document.getElementsById("loginBox").style.display = "none";
    document.getElementsById("backgroundDarkener").style.display = "none"; 
}

window.onload = function() {
    var login_box = document.getElementsById("loginBox"),
        background = document.getElementsById("backgroundDarkener");

    if (!IE) {
        login_box.addEventListener( "click", display_box , false );
        background.addEventListener( "click", hide_box , false );
    }
    else {
        login_box.attachEvent( "onclick", display_box );
        background.attachEvent( "onclick", hide_box );
    }
}
4
tsikov

C'est là que la flexbox vient au secours maintenant!

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}
2
Ankur Tiwari

Une recherche rapide sur Google a trouvé this ;

function PopupCenter(pageURL, title,w,h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

}
2
John Conde

Faites juste ceci:

.body {
    position: relative;
}
.popup {
    position: absolute;
    max-width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

peu importe la taille de l'écran ou du popup. Cela va centrer le <div class="popup"></div>.

1
Celso Soares

Simple, margin: 100px auto;. Il n'est pas nécessaire de faire des calculs en JavaScript.

Exemple en direct

1
Madara Uchiha

Vous devez utiliser ces styles pour créer div center:

width:500px; 
left:0;
right:0;
margin:0 auto;
0
lnegi