Lien dans une popup CSS ne fonctionne pas [Résolu]

Messages postés
3
Date d'inscription
mercredi 4 avril 2018
Statut
Membre
Dernière intervention
13 juin 2019
- - Dernière réponse : 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.
Afficher la suite 

1 réponse

Messages postés
3
Date d'inscription
mercredi 4 avril 2018
Statut
Membre
Dernière intervention
13 juin 2019
0
Merci
J'ai trouvé !
mon erreur était tellement grosse ...
pointer-events: none;

Merci pour votre assourdissant silence.
Roland
Commenter la réponse de RolanGau