Je suis Un Pop Up !!!

Si vous fermez le Pop UP Il revient seulement si vous fermez l'onglet ou la fenêtre du navigateur !

Pop Up

fenêtre modal

Vous trouverez des codes à copier sur vos réalisations Webacappella, à l'aide de JavaScript et CSS/HTML.

POPUP

CODES PUP UP

- Si vous fermez le Pop UP
Il revient seulement si vous fermez
l'onglet ou la fenêtre du navigateur !

CODE HEAD

<style> .k-advertising { display:none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ overflow: auto; z-index: 20; } .k-advertising-content { position: relative; margin-left: auto; margin-right: auto; text-align: center; max-width: 700px; } .k-advertising-img { width: 700px; } /* Text effect */ .k-advertising-text { background-color: #FFF; padding: 15px; font-family: 'Ropa Sans'; } @media (max-width: 700px) { .k-advertising-content { position: relative; margin-top: 15%; margin-left: auto; margin-right: auto; text-align: center; width: 100%; } .k-advertising-img { width: 100%; } k-advertising-text { width: 100%; } } /* The Close Button */ .k-advertising-close { color: #FFF; position: absolute; top: 0; right: 0; font-size: 30px; line-height: 30px; font-weight: bold; margin-right: 10px; background-color: #000; margin-top: 10px; display: block; width: 35px; height: 35px; } .k-advertising-close:hover, .k-advertising-close:focus { text-decoration: none; cursor: pointer; } </style>

CODE BODY

COPIER LE CODE DANS LE BODY DE LA PAGE:

<script> var showed = sessionStorage.getItem('popup'); if(showed != 'true'){ document.getElementsByClassName("k-advertising")[0].style.display = "block"; } function closeAdvertising(){ sessionStorage.setItem('popup', 'true'); document.getElementsByClassName("k-advertising")[0].style.display = "none"; } </script>

CODE HTML PAGE

<article class="k-advertising"> <div class="w-100 h-100 mx-auto"> <div style="display:table; width: 100%; height: 100%;"> <div style="display:table-row"> <div style="display:table-cell;vertical-align:middle;"> <div class="k-advertising-content"> <div class="k-advertising-close" onclick="closeAdvertising()">×</div> <img class="k-advertising-img" src="wa_res/icons/VOTRE_IMAGE_POPUP.jpg?t=340f1795_c005_4030_b4af_c477c124a526"/> <div class="k-advertising-text"> <h1> Je suis Un Pop Up !!! </h1> <div> Si vous fermez le Pop UP Il revient seulement si vous fermez l'onglet ou la fenêtre du navigateur ! </div> </div> </div> </div> </div> </div> </div> </article>

EDITER LE CODE HTML POUR INSERER VOS IMAGES !
Cliquez sur l'image pour l'agrandir >

FENETRE MODALE

CODES FENETRE MODALE

CODE HEAD

CODE BODY

COPIER LE CODE DANS LE BODY DE LA PAGE:

CODE HTML PAGE

<article class="k-modal"> <div class="w-100 h-100 mx-auto"> <div style="display:table; width: 100%; height: 100%;"> <div style="display:table-row"> <div style="display:table-cell;vertical-align:middle;"> <div class="k-modal-content"> <div class="k-modal-close" onclick="closeModal()">×</div> <img class="k-modal-img" src="wa_res/icons/VOTRE_IMAGE_MODALE.jpg?t=340f1795_c005_4030_b4af_c477c124a526"/> <div class="k-modal-text"> <h1> Fenêtre modale "titre" </h1> <div> Mon text Fermé pour les congés </div> </div> </div> </div> </div> </div> </div> </article>

VOIR MODALE

CODES BOUTON

Bouton vers Fenêtre modale

CODE HTML PAGE

<a href="#" class="bouton1" onclick="showModal()">Show modal</a>

CODE ELEMENT CSS

a.bouton1 { padding: 20px 60px; background: #02718c; color: white; } a.bouton1:hover { background: #80b1b5; }

Réalisé avec WebAcappella Fusion - 2023 wa-fusion.fr