Я искал разные липкие кнопки / модалы для каждого из моих разделов. Я хочу, чтобы при нажатии на кнопку появилось модальное всплывающее окно со всеми деталями статьи.
Пока все работает отлично. Моя проблема в том, что когда первый модал открыт со всеми деталями статьи, я вижу кнопку из второго модала. Я попытался организовать некоторые спецификации z-index, но не работает с классом залипания моих div.
Мне было интересно, что я должен изменить в своем коде Javascript, чтобы сделать видимой только статью без каких-либо показаны кнопки модалов.
Есть идеи, что мне исправить в скрипке, чтобы она работала правильно? Вот моя скрипка: https://jsfiddle.net/CAT999/48rd76mp/5/
мой фрагмент кода здесь ниже
.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: red;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.topright {
position: fixed!important;
right: 20px;
top: 20px;
}
*{ z-index: 999999;
margin:0;
padding:0;
}
body, html{
font-size: 16px;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.img-container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding:20px;
background-color: white;
justify-content: center;
z-index:0;
}
@media only screen and (max-width:800px){
.img-container {
padding:20px;
height: 80vh;
}
}
@media only screen and (max-width:450px){
.img-container {
padding:20px;
height: 82vh;
}
}
#uno{background:purple;}
#due{background: yellow;}
#tre{background:black;}
img {
position:absolute;
border-radius: 20px;
height:100%;
z-index:0;
}
@media only screen and (max-width:800px){
img {
width:95%;
height:80%;
object-fit: cover;
}
}
@media only screen and (max-width:450px){
img {
width:95%;
height:100%;
object-fit: cover;
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 20px;
right:20px;
justify-content: space-between;
align-self: flex-end;
margin-left: auto;
}
.sticky-button {
background: none;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4);
box-shadow:0 0px 7px rgba(0,0,0,0.4);
/*padding: 6px 10px;*/
color:white;
font-family:helvetica;
font-weight:600;
font-size: 1rem;
border-radius: 24px;
width: auto;
}
@media only screen and (max-width:800px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
@media only screen and (max-width:450px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
.sticky-button-description {
color: hsla(0,0%,100%,.75);
font-size: 12px;
line-height: 1.4em;
letter-spacing: normal;
font-size: 12px;
line-height: 1.4em;
font-weight:400;
font-family:helvetica;
display:inline;
letter-spacing: normal;
}
@media only screen and (max-width:450px){
.sticky-button-description{
}
}
.sticky-button-break {
padding:0.3rem;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.break{height:200px;
width:100%;
background:black;
margin:0;
padding:0;}
.break-2{height:900px;
width:100%;
background:red;
margin:0;
padding:0;}
.btn-1 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:100;
}
.btn-1:active {
transform: scale(10.9);
opacity:0;
z-index:20;
transition: transform .3s ease;
z-index:100;
}
.btn-2 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:50;
}
.btn-2:active {
position:sticky;
transform: scale(10.9);
z-index:50;
}
.btn-3 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:30;
}
.btn-3:active {
transform: scale(10.9);
z-index:30;
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: fixed;
width: 100%;
margin: 15vh auto 0;
background: black;
color:#fff;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 26px;
font-weight:400;
}
/*MODAL TRIGGER*/
/*MODAL TRIGGER*/
const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.nextElementSibling
overlay.classList.add('overlay--open');
}
})
function closeModal() {
overlay.classList.remove('overlay--open');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);