Aller au contenu
CapitaineMatteo

Comment faire une popup en javascript pur

Messages recommandés

Bonjour, aujorud'hui on va voir comment passer d'un alert() à une popup.

Ce tutoriel est disponible sur mon codepen: LeCodeurHTMLCSSJSPHP

Sinon le code est ici:

Code HTML:

<div id="myModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close">×</span>
                <h2>Votre titre</h2>
            </div>
            <div class="modal-body">
                <p>Votre texte.</p>
            </div>
        </div>
    </div>
    <!--- Votre titre et votre texte doivent etre remplacé par le contenu de la popup ex: le titre, des descriptions... --->

Code CSS:

.modal{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-header{
    padding: 2px 16px;
    background-color: #5CB85C;
    color: white;
}

.modal-body{
    padding: 2px 16px;
}

.modal-content{
    background-color: #FEFEFE;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

@keyframes animatetop {
    from {
        top: -300px; opacity: 0;
    }
    to {
        top: 0; opacity: 1;
    }
}

.close{
    color: #AAA;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus{
    color: black;
    text-decoration: none;
    cursor: pointer;
}

Code JS:

var modal = document.getElementById('myModal');
var body = document.querySelector("body");
var span = document.getElementsByClassName("close")[0];

body.onload = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if(event.target == modal) {
        modal.style.display = "none";
    }
}

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×

Information importante

Nous avons placé des cookies sur votre appareil pour aider à améliorer ce site. Vous pouvez choisir d’ajuster vos paramètres de cookie, sinon nous supposerons que vous êtes d’accord pour continuer.