How to close Pop-Up in HTML?
I have a modal window that appears automatically when the page loads. The problem is that pressing the " X " button does not close the Pop-up. Is there any way to close it without using Javascript or Jquery? Here I leave the code of the HTML
index.html
<div class="modal-wrapper" id="popup">
<div class="popup-contenedor">
<h2>Titulo de la Modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor deleniti in porro, officia velit quaerat modi doloribus similique aspernatur impedit quod, laudantium reiciendis! Similique nihil eius esse, illum assumenda soluta!. </p>
<a class="popup-cerrar" href="#popup">X</a>
</div>
1
4 answers
This is a modal window made without JavaScript, nor jQuery, only with CSS.
.btn {
position: relative;
padding: 8px 16px;
font-family: 'psychotik';
font-size: 1.2em;
font-weight: normal;
color: #fff;
text-shadow: none;
border-radius: 16px;
background: #00A6B6;
box-shadow: inset 2px 2px 1px #007f8b;
}
.btn:hover {
background: #FF9C00;
box-shadow: inset 2px 2px 1px #995f02;
}
#modalContent {
position: absolute;
top: 50%;
left: 50%;
z-index: 6;
margin: -2% 0px 0px -150px;
float: left;
width: 300px;
color: #fff;
line-height: 22px;
padding: 15px;
border-radius: 5px;
background: #00A6B6;
border: 1px solid #fff;
box-shadow: 0px 2px 1px #999;
}
#modal {
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
float: left;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
display: none;
opacity: 0;
}
#modal>a {
position: fixed;
top: 0px;
left: 0px;
z-index: 1;
float: left;
width: 100%;
height: 100%;
}
:target {
display: block!important;
opacity: 1!important;
}
#modalContent>a {
position: absolute;
top: -4px;
right: -4px;
color: #00A6B6;
border-radius: 2px;
background: #fff;
padding: 4px;
}
<a href="#modal" title="" class="btn">Pincha aquí</a>
<!-- La modal -->
<div id="modal">
<a href="#cerrar"></a>
<div id="modalContent">
<h1>Soy una ventana modal</h1>
<p>Hecha sin JS ni jQuery, solo CSS3</p> <a href="#cerrar">X</a> </div>
</div>
1
Author: Kike Algarra, 2017-07-02 14:30:31
Here's a pretty simple option:
Javascript Code
onclick=”window.opener.location.reload(); window.close();”
0
Author: vdjkelly, 2016-11-06 02:59:37
To the anchor href, leaving it alone # should reload the original page and therefore no longer show you the modal window
0
Author: Cecilia, 2016-11-07 02:48:43
The truth, I will only replicate a "very similar" code that circulates on the web "among others". I will not go into details, because if you want more information the most fair is to visit the site that I take Reference:
Create modal window with CSS only
#popup {
background-color: rgba(0,0,0,0.8);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
-webkit-animation:autopopup 2s;
-moz-animation:autopopup 2s;
animation:autopopup 2s;
}
@-webkit-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@-moz-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
#popup:target {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
opacity: 0;
visibility: hidden;
}
.popup-contenedor {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #fafafa;
color:#333;
border-radius: 3px;
width:50%;
}
a.popup-cerrar {
position: absolute;
top:3px;
right:3px;
background-color: #333;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#fff;
}
<div class="modal-wrapper" id="popup">
<div class="popup-contenedor">
<h2>Titulo de la Modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor deleniti in porro, officia velit quaerat modi doloribus similique aspernatur impedit quod, laudantium reiciendis! Similique nihil eius esse, illum assumenda soluta!. </p>
<a class="popup-cerrar" href="#popup">X</a>
</div>
</div>
0
Author: NekoOs, 2017-07-02 15:03:26