Bonjour à tous,
J'aimerais que les notifications de réussite d'envoi et d'échec sur la page du formulaire de contact du site www.samoudembele.ml s'apparaissent comme celles du site http://www.boiteasite.fr/contact.html (Apparaître en avant-plan)
Voici le squelette des notifications:
Je sais pas comment le faire...
Par avance, merci.
J'aimerais que les notifications de réussite d'envoi et d'échec sur la page du formulaire de contact du site www.samoudembele.ml s'apparaissent comme celles du site http://www.boiteasite.fr/contact.html (Apparaître en avant-plan)
Voici le squelette des notifications:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR" prefix="og: http://ogp.me/ns#" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noodp" />
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contact Form</title>
</head>
<body>
<div id="navsac">
<div class="dialog" id="navmsg-nasa" role="dialog">
<div class="navmsg__content-s">
<header class="navmsg__header-s">Envoi réussi</header>
<div class="navmsg__body-s">Merci ! Votre e-mail a été correctement envoyé. Vous recevrez une réponse dès que possible !</div>
<footer class="navmsg__footer">
<button type="button" class="navmsg__close-s button" data-dismiss="alert" onclick="navsac()">Fermer</button>
</footer>
</div>
</div>
<script>
function navsac()
{
document.getElementById('navsac').style.display = 'none';
}
</script>
</div>
</body>
</html>
.dialog{-webkit-perspective:1300px;font-family:'brandon_text_regularregular';perspective:1300px;position:fixed;top:50%;left:50%;width:50%;max-width:625px;min-width:240px;height:auto;z-index:2000;visibility:visible;-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}.navmsg__content-s,.navmsg__content-a{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(-70deg);transform:rotateY(-70deg);transition:all .3s;opacity:0;border-radius:3px}.dialog{visibility:visible;}.navmsg__content-s,.navmsg__content-a{-webkit-transform:rotateY(0);transform:rotateY(0);opacity:1}.navmsg__close-s,.navmsg__close-a{-webkit-animation:slide-modal-content .4s both;animation:slide-modal-content .4s both;-webkit-animation-delay:.15s;animation-delay:.15s;padding:3px;font-family:'brandon_textlight';}.navmsg__body-s,.navmsg__body-a{-webkit-animation:slide-modal-content .5s both;font-family:'brandon_text_regularregular';animation:slide-modal-content .5s both;-webkit-animation-delay:.25s;animation-delay:.25s;padding:8px 2px;}.navmsg__header-s,.navmsg__close-s{background:#0f2a4a;color:#fff}.navmsg__close-s:hover,.navmsg__close-s:focus{background:rgba(15,42,74,.75)}.navmsg__content-s{background:#dff0d8;color:#0f2a4a}.navmsg__header-a,.navmsg__close-a{background:#8a5756;color:#fff}.navmsg__close-a:hover,.navmsg__close-a:focus{background:#c16361}.navmsg__content-a{background:#f2dede;color:#8a5756}.navmsg__header-s,.navmsg__header-a{text-align:center;font-size:2.4em;font-family:'brandon_textlight';font-weight:300;line-height:1.2;padding:.4em}.navmsg__body{padding:24px}.navmsg__footer{text-align:center;height:28px;padding:2px 24px 14px}.dialog footer{height:28px !important;}Je sais pas comment le faire...
Par avance, merci.
