I have a popup from the header, my problem is that when I click on the popup, it opens but the content that is not in the navigation bar overlaps.
I want the window that appears in the second image to appear above the content of the page and I can click on it.
Page without clicking on the button that opens the popup:
I can't interact with the popup/overlay and I want the overlay container to have 100% opacity (not transparent):
Appears above the popup/overlay:
I want it to look like this but with the content outside the popup I can't interact with it:
pop-up:
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="nav">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mb-2 mb-lg-0 ms-auto">
<li class="nav-item">
<button id="btn-abrir-popup" class="btn-abrir-popup">Trabajos</button>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<a href="#" id="btn-cerrar-popup" class="btn-cerrar-popup"><i class="fas fa-times"></i></a>
<div class="row">
<div class="col-md-6">
<a href="img1.php"><img src="img/global.jpg" id="img"></a>
</div>
<div class="col-md-6">
<a href="img1.php"><img src="img/global.jpg" id="img"></a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
js-file:
var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
overlay = document.getElementById('overlay'),
popup = document.getElementById('popup'),
btnCerrarPopup = document.getElementById('btn-cerrar-popup');
btnAbrirPopup.addEventListener('click', function(){
overlay.classList.add('active');
popup.classList.add('active');
});
btnCerrarPopup.addEventListener('click', function(e){
e.preventDefault();
overlay.classList.remove('active');
popup.classList.remove('active');
});
CSS:
.overlay {
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: flex;
visibility: hidden;
}
.overlay.active {
visibility: visible;
}
.popup {
/* recuadro*/
background: #F8F8F8;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
padding: 20px;
text-align: center;
width: 900px;
transition: .3s ease all;
transform: scale(0.7);
opacity: 0;
}
.popup form .container-inputs {
opacity: 0;
}
.popup form .container-inputs input {
width: 100%;
margin-bottom: 20px;
height: 52px;
font-size: 18px;
line-height: 52px;
text-align: center;
border: 1px solid #BBBBBB;
}
I don't know how you are launching that popup, but in bootstrap there is a modal component that can be used for it.
I would do it like this, including these divs instead of the overlay and popup divs:
and finally closing them.
And then, at the end of the document, before the
</body>
, I would add this to launch it on page startup:A free tip : Don't use beta versions of anything, always use the latest stable one. Betas tend to change at any time and are not stable.
I leave a functional snippet for you to see: