Lien dans une popup CSS ne fonctionne pas

Résolu/Fermé

RolanGau Messages postés 3 Date d'inscription mercredi 4 avril 2018 Statut Membre Dernière intervention 13 juin 2019 - 12 juin 2019 à 15:04
RolanGau Messages postés 3 Date d'inscription mercredi 4 avril 2018 Statut Membre Dernière intervention 13 juin 2019 - 13 juin 2019 à 09:19

Bonjour à tous,

Chèvre je deviens :

Je mets un lien dans une popup CSS, et celui-ci ne fonctionne pas.

Il n'est même pas vu par le navigateur (qui donc n'affiche pas l'adresse du lien en bas à gauche lors du survol).
Ci dessous le source d'un petit fichier de test :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style>
			html, body {
				scroll-behavior: smooth;
				height: 100vh;
				font-family: 'Ubuntu', sans-serif !important;
				font-size: 1em !important;
				line-height: 1.3;
				border-radius: 3px;
			}
			
			::before,
			::after {
				box-sizing: inherit;
			}
			.mskd {
				opacity: 0 !important;
			}

			.popupCnt {
				background: #223344AA;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				overflow-y: scroll;
				position: fixed;
				transition: opacity .5s ease;
				opacity: 1;
				border-radius: 3px;
			}   
			.popup {
				background-color: white;
				color: royalblue;
				opacity: 1;
				box-sizing: content-box;
				margin: auto;
				width: 100%;	
				border-radius: 3px;
				box-shadow: 0 1px 3px rgba(33,41,52,.75);
				display: flex;
				flex-flow: column nowrap;
				max-width: 700px;
				min-width: 320px;
				position: relative;
			}
			.popup .head, .popup .foot {
				background-color: royalblue;
				color: white;
				text-align: center
			}
			.popup .head, .popup .foot, .popup .body {
				padding: 0.5em 3em;
				pointer-events: none;
			}
			.popoff {
				position: absolute;
				width: 1px;
				height: 1px;
				top: 0;
				right: 0;
				background-color: #00000001;
			}
			.popoff::after {
				content: '×';
				text-align: center;
				line-height: 1;
				font-size: 2em;
				font-weight: bolder;
				position: absolute;
				width: 1.2em;
				height: 1.2em;
				right: -1.2em;
				top: -1.2em;
				border-radius: 50%;
				background: white;
				color: royalblue;
				cursor: pointer;
				overflow: hidden;
				box-shadow: 0 1px 3px rgba(33,41,52,.75);
			}
		</style>
	</head>
	<body>
		<p>test de lien <a href="https://speedytools.online"> ici</a>.</p>
	  	<div class="popupCnt">
		  	<div class="popup">
		  		<div class="popoff"></div>
			  	<div class="head">
					 <h1>entete</h1>
			  	</div>
			  	<div class="body">
					<p>test de lien <a href="https://speedytools.online"> ici</a>.</p>
					 <p>Body de la popup</p>
			  	</div>
			  	<div class="foot">
					 <p>pied de la pop up</p>
			  	</div>
		  	</div>
	  	</div>
		<p>hello world !</p>
		<script>
		document.getElementsByClassName('popoff')[0].addEventListener('click',(e)=>{
			let o = e.currentTarget;
			while (!o.classList.contains('popupCnt')) {o = o.parentElement;}
				o.classList.add('mskd');
			}, true);
		</script>
	</body>
</html>

Il semble que cela vient de la popup elle-même, puisque même le lien qui n'est pas dans la popup ne fonctionne pas ...

Merci par avance de vos lumières, je n'arrive pas à trouver mon erreur.

A voir également:

Lien dans une popup CSS ne fonctionne pas
Lien url - Guide
Créer un lien pour partager des photos - Guide
Verifier un lien - Guide
Sommaire word avec lien - Guide
Css lien non souligné - Astuces et Solutions

1 réponse

Réponse 1 / 1

RolanGau Messages postés 3 Date d'inscription mercredi 4 avril 2018 Statut Membre Dernière intervention 13 juin 2019
Modifié le 13 juin 2019 à 09:21

J'ai trouvé !
mon erreur était tellement grosse ...

pointer-events: none;

Merci pour votre assourdissant silence.
Roland

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"

Rajout de lien sur plusieurs pages

Impossible d'ouvrir des liens via mon Samsung A71

comment utiliser un lien MEGA pour télécharger un fichier ?

Faux virus (Pour une blague)