I created a popup with pseudoclass :target and it works properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Open Sans", sans-serif;
padding: 0;
margin: 0;
}
h2 {
color: #2062ae;
}
a.btn {
display: block;
margin: 0px auto;
border: 1px solid #2062ae;
padding: 10px 20px;
color: #2062ae;
width: 100px;
transition: 0.4s;
text-decoration: none;
text-align: center;
}
a.btn:hover {
background: #2062ae;
color: white;
}
.popup {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
#popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #999;
opacity: 0;
transition: 1s;
z-index: -1;
}
#popup:target {
opacity: 1;
z-index: 2;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
/* min-height: 35%;
width:50%;
line-height: 1.5; */
/* word-break: break-all; */
transform: translate(-50%, -50%);
padding: 20px 10px;
background: rgb(238, 235, 235);
border: 5px ridge orange;
font-size: smaller;
}
.close-popup {
position: absolute;
top: -1em;
left: -1em;
width: 2em;
height: 2em;
border-radius: 50%;
line-height: 2em;
text-align: center;
background-color: #ccc;
text-decoration: none;
color: black;
}
video {
width: 100%;
height: auto;
display: block; /* Necessario altrimenti visualizza una striscia bianca in basso */
}
</style>
</head>
<body>
<div class="popup">
<h2>Pure CSS Popup</h2>
<a href="#popup" class="btn">Apri Popup</a>
</div>
<div id="popup">
<div class="popup-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis
iure numquam quia dolores voluptates repellat qui, incidunt in, enim
id laborum doloribus odio rem sed fuga ratione totam? Laboriosam,
ipsam.
</p>
<!-- Attribute muted necessario altrimenti Google Chrome potrebbe impedire l'autoplay -->
<!-- <video src="video.mp4" autoplay muted controls></video> -->
<a href="#" class="close-popup" aria-label="chiudi">X</a>
</div>
</div>
<!-- <script>
let closeLink = document.querySelector(".close-popup");
closeLink.onclick = stoppaVideo;
function stoppaVideo() {
document.getElementsByTagName("video")[0].pause();
}
</script> -->
</body>
</html>However I would make possible click on the background/overlay element and close the popup. For this purpose I transformated the div element (#popup) in a tag but in this way doesn’t work. How could I resolve, and why doesn’t work like that?
Below the code that doesn’t work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Open Sans", sans-serif;
padding: 0;
margin: 0;
}
h2 {
color: #2062ae;
}
a.btn {
display: block;
margin: 0px auto;
border: 1px solid #2062ae;
padding: 10px 20px;
color: #2062ae;
width: 100px;
transition: 0.4s;
text-decoration: none;
text-align: center;
}
a.btn:hover {
background: #2062ae;
color: white;
}
.popup {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
#popup {
display:block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #999;
opacity: 0;
transition: 1s;
z-index: -1;
}
#popup:target {
opacity: 1;
z-index: 2;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
/* min-height: 35%;
width:50%;
line-height: 1.5; */
/* word-break: break-all; */
transform: translate(-50%, -50%);
padding: 20px 10px;
background: rgb(238, 235, 235);
border: 5px ridge orange;
font-size: smaller;
}
.close-popup {
position: absolute;
top: -1em;
left: -1em;
width: 2em;
height: 2em;
border-radius: 50%;
line-height: 2em;
text-align: center;
background-color: #ccc;
text-decoration: none;
color: black;
}
video {
width: 100%;
height: auto;
display: block; /* Necessario altrimenti visualizza una striscia bianca in basso */
}
</style>
</head>
<body>
<div class="popup">
<h2>Pure CSS Popup</h2>
<a href="#popup" class="btn">Apri Popup</a>
</div>
<a href="#" id="popup">
<div class="popup-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis
iure numquam quia dolores voluptates repellat qui, incidunt in, enim
id laborum doloribus odio rem sed fuga ratione totam? Laboriosam,
ipsam.
</p>
<!-- Attribute muted necessario altrimenti Google Chrome potrebbe impedire l'autoplay -->
<!-- <video src="video.mp4" autoplay muted controls></video> -->
<a href="#" class="close-popup" aria-label="chiudi">X</a>
</div>
</a>
<!-- <script>
let closeLink = document.querySelector(".close-popup");
closeLink.onclick = stoppaVideo;
function stoppaVideo() {
document.getElementsByTagName("video")[0].pause();
}
</script> -->
</body>
</html>