Une fenêtre modale pour sa page d’accueil 1

Une fenêtre modale pour sa page d’accueil

Une technique propre et rapide pour afficher une pop up au chargement de la page d’accueil consiste à utiliser uniquement du css et un peu de js .

See the Pen EaZjzj by yuyazz (@yuyazz) on CodePen.

Et voici le code html de mon index.html :

<body onload="window.location.href = '#openModal';"> 
    

    <div id="openModal" class="modalDialog">
        <div>
            <a href="#close" title="Close" class="close">Accéder au site</a>
            <h2>Ma petite Modal Box</h2>
            <p>Voic ma modalbox!!!</p>
            <p>Alors !!bien ou bien!!</p>
        </div>
    </div>

On place le onload sur le body, ce qui fait qu’au chargement de la page, notre pop up s’ouvrira.
Le href pointe vers la div à ouvrir, sur laquelle on place un ID du même nom : « openModal« . A l’intérieur de la div, on peut évidemment y mettre ce que l’on veut.

Ici plutôt que de mettre une croix pour la fermeture, je place un lien avec la mention « accéder au site » . Si on veut plutôt placer une croix il suffit juste de modifier le lien « a href » comme suit :

<a href="#close" title="Close" class="close">X</a>

Le css pour notre pop up:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
text-align: center;
float: right;
width: 112px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }

2 commentaires sur “Une fenêtre modale pour sa page d’accueil 1

  1. cmai

    Bonjour,
    Cla ne fonctionne pas avec IE 9 et peut-être auttres versions !
    avez-vous une solution ?

    Merci

  2. yuyazz

    Hello!!je te renvoie dans ce cas vers d’autres sources et de trouver des alternatives aux fonctions js non reconnues par IE9..

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.