5568 sujets

Sémantique web et HTML

Code JS pour fermer ce dialogue

Bonjour,

S'il vous plaît, aidez moi à trouver un script JS pour fermer cette boite de dialogue avec le bouton "Fermer"

Merci par avance

 <!---------------- HTML----------------->
<!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>
<link rel="stylesheet" href="styles.css">
			<script src="js/jquery-3.2.1.min.js"></script>

<title>Contact Form</title>
</head>
<body>

<div class="contact-alerts">
					<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">Fermer</button>
							</footer>
						</div>
					</div>
					
					<!---<div class="dialog" id="navmsg-nasa" role="dialog">
						<div class="navmsg__content-a">
							<header class="navmsg__header-a">Erreur d\'envoi</header>
							<div class="navmsg__body-a">Une erreur s\'est produite lors de l\'envoi de l\'e-mail. Merci de me signaler le problème via Twitter.</div>
							<footer class="navmsg__footer">
								<button type="button" class="navmsg__close-a button" data-dismiss="alert">Fermer</button>
							</footer>
						</div>
					</div> --->
				</div>
</body>
</html>

 /**** CSS ****                          /
.dialog{-webkit-perspective:1300px;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{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(-70deg);transform:rotateY(-70deg);transition:all .3s;opacity:0;border-radius:3px}.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{-webkit-transform:rotateY(0);transform:rotateY(0);opacity:1}.navmsg__content-a{-webkit-transform:rotateY(0);transform:rotateY(0);opacity:1}.navmsg__close-s{-webkit-animation:slide-modal-content .4s both;animation:slide-modal-content .4s both;-webkit-animation-delay:.15s;animation-delay:.15s}.navmsg__close-a{-webkit-animation:slide-modal-content .4s both;animation:slide-modal-content .4s both;-webkit-animation-delay:.15s;animation-delay:.15s}.navmsg__body-s{-webkit-animation:slide-modal-content .5s both;animation:slide-modal-content .5s both;-webkit-animation-delay:.25s;animation-delay:.25s;padding:8px 2px;}.navmsg__body-a{-webkit-animation:slide-modal-content .5s both;animation:slide-modal-content .5s both;-webkit-animation-delay:.25s;animation-delay:.25s}

.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:#a94442;color:#fff}.navmsg__close-a:hover,.navmsg__close-a:focus{background:#c16361}.navmsg__content-a{background:#f2dede;color:#a94442}.navmsg__header-s,.navmsg__header-a{text-align:center;font-size:2.4em;font-weight:300;line-height:1.2;padding:.4em}.navmsg__body{padding:24px}.navmsg__footer{text-align:center;padding:2px 24px 14px}
Bonjour,

Le topic devrait plutôt être dans la catégorie JS.

Pour ta demande, un simple
$('.navmsg__close-s').click(function(){
  $(this).parents('.dialog').hide(300)
})

... devrait suffire
Sujet clos
Aller à