Как сделать всплывающее окно в центре экрана?

Когда я нажимаю ссылку, появляется всплывающее окно. Дело в том, что оно не выровнено по центру экрана. Кстати, мой код также помогает веб-сайту (и всплытию) отлично выглядеть в мобильной версии.

Код HTML:

<a href="#" data-reveal-id="exampleModal">POP UP</a>

<div id="exampleModal" class="reveal-modal">
     <h2>POP UP</h2>
     <p>
     <font size="4">window window window.window window window. window.
         </font>
    </p>
    <a class="close-reveal-modal">×</a>
</div>

Код css:

 .reveal-modal     
  {
        background:#e1e1e1; 
        visibility:hidden;
        display:none;
        top:100px; 
        left:50%; 
        width:820px; 
        position:absolute; 
        z-index:41;
        padding:30px; 
        -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
        -moz-box-shadow:0 0 10px rgba(0,0,0,0.4); 
        box-shadow:0 0 10px rgba(0,0,0,0.4)
  }

Я попробовал правильно: 50%, но это не сработало. Не следует ли работать?

Ответ 1

Это изменения:

CSS

#container {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    visibility: hidden;
    display: none;
    background-color: rgba(22,22,22,0.5); /* complimenting your modal colors */
}
#container:target {
    visibility: visible;
    display: block;
}
.reveal-modal {
    position: relative;
    margin: 0 auto;
    top: 25%;
}
    /* Remove the left: 50% */

HTML:

<a href="#container">Reveal</a>
<div id="container">
    <div id="exampleModal" class="reveal-modal">
    ........
    <a href="#">Close Modal</a>
    </div>
</div>

JSFiddle - обновлено только с помощью CSS

Ответ 2

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

В вашем CSS использовать (например)

div.centered{
  width: 100px;
  height: 50px;
  position:fixed; 
  top: calc(50% - 25px); // half of width
  left: calc(50% - 50px); // half of height
}

JS не требуется.

Ответ 3

/*--------  Bootstrap Modal Popup in Center of Screen --------------*/
/*---------------extra css------*/
.modal {
    text-align: center;
    padding: 0 !important;
}
.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
/*----- Modal Popup -------*/
<div class="modal fade" role="dialog">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h5 class="modal-title">Header</h5>
            </div>
            <div class="modal-body">
               body here     
             </div>
        <div class="modal-footer">            
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

Ответ 4

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

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}