Comment faire de popup regardez le centre de l'écran?

Lorsque je clique sur un lien, une fenêtre pop-up qui vient de sortir. Le truc, c'est qu'il n'est pas aligné sur le centre de l'écran. Par la façon dont mon code permet également le site web (et les pop-up) à l'air parfaitement en 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é de mettre un peu de droit:50% aussi, mais cela n'a pas fonctionné. Ne devrait pas quitter le travail ?

Utiliser jQuery pour calc / défini la gauche, ou de mettre en popup dans un récipient qui est pleine largeur, et a text-align: center sur celui-ci.
js fiddle aiderait

OriginalL'auteur Apolo Radomer | 2013-10-19

  1. 16

    Ce sont les modifications à effectuer:

    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 de CSS

    Je ne veux pas ajouter de la jss, car je vais devoir changer certaines choses. N';t que possible avec css?
    oui, j'ai été paresseux lol je vais corriger ça vite fait tenir jusqu'
    il ya go. Mis à jour le jfiddle pour vous aussi de sorte que vous pouvez le voir en action.
    Ceci a travaillé ainsi : lien
    Très beau travail. Qui modal m'a inspiré à faire certains de mes propres trucs ce soir et n'ai pas arrêté encore lol

    OriginalL'auteur Deryck

  2. 2

    Si l'effet que vous voulez, c'est le centre au milieu de l'écran, peu importe où vous avez fait défiler, c'est encore plus simple que ça:

    Dans votre CSS utiliser (par exemple)

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

    Pas de JS nécessaire.

    Vous n'moins 50px pour la position la plus à gauche. Que faire si la largeur de mon pop-up n'est pas fixe (% de valeur)?
    Bonne solution, mais mince historique soutien dans certains navigateurs mobiles (source: caniuse.com/#search=calc)

    OriginalL'auteur Nancy Hastings-Trew

  3. 1
    /*--------  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>
    Veuillez envisager une augmentation de votre réponse la prochaine fois 🙂

    OriginalL'auteur Awadhesh Singh