как мне центрировать javascript css popup div независимо от разрешения экрана?

У меня есть следующий код, который открывает новое всплывающее окно при отключении фона, проблема в том, что я должен расположить его так, чтобы он был на 100 пикселей сверху (уже получил это через CSS #dialog), а также в центре экран, независимо от того, какое разрешение у пользователя?

<!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>
 Madara Uchiha♦13 июн. 2012 г., 21:20
Пожалуйста, правильно отформатируйте свой код, чтобы он был читабельным. Я сделал это для тебя на этот раз. Кроме того, я заметил, что у вас нет точек с запятой (;) в вашем коде JavaScript, это очень плохая практика! Каждое утверждение должно заканчиваться точкой с запятой.

Ответы на вопрос(7)

Вот где Flexbox приходит на помощь сейчас!

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

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

Вам нужно использовать эти стили, чтобы сделать div центр:

width:500px; 
left:0;
right:0;
margin:0 auto;
Решение Вопроса

CSS based решение по центру:

Вам нужно использовать эти стили, чтобы сделать его мертвым центром:

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

Такposition должно быть указано.top а такжеleft должно быть50%,margin-left а такжеmargin-top должна быть отрицательной половиной ширины и высоты коробки соответственно.

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

 11 авг. 2014 г., 12:14
Отличное решение! Не видел этого раньше.
 06 дек. 2014 г., 16:20
очень хороший код сэкономил мне много времени +1 от меня! :-)

То, что вам нужно, называетсяlight-box.

Для его создания необходимо изменить код HTML, CSS и JS.

Допустим, ваш лайтбокс состоит только из строки «форма входа». (Вы можете поместить туда все, что хотите). HTML-код должен выглядеть так:

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

Теперь нам нужно скрыть это с помощью CSS:

div#loginBox {
    display: none;
}

Теперь наша коробка не видна. Давайте изменим наш блок так, как вы хотите, чтобы он был размером 100 пикселей сверху:

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

Мы будем беспокоиться об отключении фона позже.

Наша следующая работа - сделать кнопку, которая будет отображать окно, когда оно нам нужно. Очень просто:

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

Обратите внимание, что нам не нужен "href" атрибут, потому что это будет перемещать экран при нажатии и других нежелательных поведениях.

Давайте прикрепим обработчик события к кнопке через 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 );
    }
}

Но вы хотите, чтобы он был в центре экрана? Тогда функция выглядит так:

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

Я предполагаю, что вы захотите закрыть окно в какой-то момент и сделать «отключенный фон» эффект. Для этого вы можете создать класс div, который распространяется на весь экран, прикрепив & quot; display & quot; добавьте в zss некоторый z-index, чтобы убедиться, что loginBox находится над «отключенным фоном», и прикрепите «закрыть loginBox»; событие на «фоне» дела. И теперь окончательный код выглядит так:

Обратите внимание, что мы заботимся только о расположении кнопки входа в систему, потому что остальные скрыты от просмотра, а затем изменены с помощью 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 );
    }
}
 user122791414 июн. 2012 г., 00:18
Спасибо, я изучу это подробно :)
 14 июн. 2012 г., 05:42
Добро пожаловать. Не стесняйтесь обращаться за разъяснениями, буду рад помочь.

Просто сделай это:

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

не имеет значения размер экрана или всплывающего окна. Это будет центрировать<div class="popup"></div>.

Быстрый поиск Google найденэтот;

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

} 

Просто,margin: 100px auto;, Нет необходимости выполнять вычисления в JavaScript.

Живой пример

 13 июн. 2012 г., 21:21
@Sarfraz: Как это уменьшает ценность моего ответа? являетсяmargin имущество хранится только для контейнеров?margin: auto этоtechnique для центрирования элемента в его родителе.
 13 июн. 2012 г., 21:20
Он рассматривает всплывающее окно, которое должно появиться в центре, вроде лайтбокса, а не контейнера или какого-либо элемента-обертки.

Ваш ответ на вопрос