web-dev-qa-db-fra.com

Comment faire apparaître par popup le centre de l'écran?

Lorsque je clique sur un lien, une fenêtre contextuelle apparaît. Le fait est que ce n'est pas aligné au centre de l'écran. En passant, mon code aide également le site Web (et la fenêtre contextuelle) à se présenter parfaitement dans une version mobile. 

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

Le code 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)
  }

J'ai essayé d'en corriger quelques-uns: 50% également mais cela n'a pas fonctionné. Ne devrait pas quitter le travail?

csspopupalignment
10
Apolo Radomer

Ce sont les changements à apporter:

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 - Mise à jour avec CSS uniquement

16
Deryck

Si l'effet souhaité doit être centré au centre de l'écran, peu importe où vous avez fait défiler l'écran, c'est encore plus simple: 

Dans votre utilisation CSS (par exemple)

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

Aucun JS requis.

2
Nancy Hastings-Trew
/*--------  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>
1
Awadhesh Singh