Доброго времени суток!
Возникла следующая ситуация:
Есть 2 раскрывающиеся блока со скрытым содержимым. В одном из них есть кнопка-картинка, нажав на которую выходит модальное окно внутри которого слайдер. На странице таких кнопок-картинок (и следовательно с разным содержимым их модальных окон) много. Суть проблемы в том, что нажав на первую картинку-кнопку модальное окно со слайдером появляется, но поверх него видно другую (рядом расположенную) картинку-кнопку.
Вот css и html:
https://codepen.io/PK-1207/pen/EvdXXV
<div class="main">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1" title="Нажмите для выбора"> <p>Раскрывающийся блок 1</p><div></div></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3" title="Нажмите для выбора" >Раскрывающийся блок 2<div></div></label>
<section id="content1">
<center><a class="button" href="#popup1">
<div class="img-desc">
<img src="http://xn--h1adaolkc5e.kz/uploads/8/3/5/8359-otkritki-Otkritka-kartinka-dobroe-utro-otkritka-dobroe-utro-s-dobrim-utrom-pozhelanie-dobrogo-utra-sova.jpg">
<cite><center>Подпись картинки</center></cite></div>
</a>
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">Содержимое (слайдер)
</center><div>
<center><a class="button2" href="#popup2">
<div class="img-desc">
<img src="https://s-media-cache-ak0.pinimg.com/originals/95/be/89/95be892d8fd579771755b5fd3db11292.jpg">
<cite><center>ФЕЕРИЯ ЦВЕТА. 2015 г.</center></cite></div>
</a>
<div id="popup2" class="overlay2">
<div class="popup2">
<a class="close" href="#">×</a>
<div class="content">Содержимое (слайдер2)
</center></div>
</section>
.img-desc {
margin-top: 50px; /* Отступ cверху */
margin-right: 50px; /* Отступ справа */
margin-bottom: 50px; /* Отступ снизу */
position: relative;
display:inline-block;
height:400px;
width: 293px;
}
.img-desc cite {
background: #7C4F5E;
filter:alpha(opacity=55);
font-style: normal;
opacity: .8;
color: #ffffff ;
position: absolute;
bottom: 0;
left: 0;
width: 285px;
padding: 15px;
border-top: 2px solid #999;
}
.button {
z-index: 0.5;
font-size: 1em;
padding: 10px;
color: #fff;
float: left;
margin-right: 3px;
display: inline-block;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
cursor: pointer;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
top: 50px;
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 100%;
height:600px;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
z-index: 999999;
position: absolute;
top: 20px;
right: 80px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
z-index: 999999;
color: #06D85F;
}
.popup .content {
top: 50px;
width: 100%;
height:600px;
overflow: auto;
}
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
.button2 {
position:relative ;
z-index: -1000;
font-size: 1em;
padding: 10px;
color: #fff;
float: left;
margin-right: 3px;
display: inline-block;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button2:hover {
cursor: pointer;
}
.overlay2 {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay2:target {
visibility: visible;
opacity: 1;
}
.popup2 {
top: 50px;
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 100%;
height:600px;
position: relative;
transition: all 5s ease-in-out;
}
.popup2 h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup2 .close {
z-index: 999999;
position: absolute;
top: 20px;
right: 80px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup2 .close:hover {
z-index: 999999;
color: #06D85F;
}
.popup2 .content {
top: 50px;
width: 100%;
height:600px;
overflow: auto;
}
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup2{
width: 70%;
}
}
.main {
width:100%;
min-width:360px;
}
/* Базовый контейнер табов */
.tabs {
width: 100%;
padding: 0px;
margin: 0 auto;
}
/* стили вкладок (табов) */
.tabs label {
display: table-cell;
width:1%;
height:50px;
margin: 0 0 0 -10px;
padding: 15px 15px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
vertical-align:middle;
color: #FFFFFF;
background: rgb(124, 79, 94);
background: linear-gradient(#845363, #845363) #724856;
transition: 0.2s;
cursor: pointer
}
/* стили для активной вкладки */
.tabs input:checked + label {
background:linear-gradient(bottom, #a56f81, #7c4f5e);
background:-webkit-linear-gradient(bottom, #a56f81 5%,#7c4f5e );
background: -moz-linear-gradient (bottom, #a56f81 5%,#7c4f5e );
background-image: -o-linear-gradient (bottom, #a56f81 5%,#7c4f5e );
}
/* изменения стиля заголовков вкладок при наведении */
.tabs label:hover {
color: #FFFFFF;
cursor: pointer;
}
.tabs input:checked + label > div:after {
content: '';
position: absolute;
width:0;
height:0;
top:80px;
border: 15px;
margin-left:-15px;
border-top-color: #292929;
}
/* активация секций с помощью переключателя :checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
/* стили секций с содержанием */
section {
margin-top: 50px;
width:97%; /* Ширина слоя */
z-index: -10;
display: none;
padding: 15px;
background: #fff;
}
.tabs input {
display: none;
}
