Доброго времени суток. Такая возникла проблема: имеются 3 блока. Необходимо сделать так, чтобы при выборе блока №1
и нажатии на кнопку "Далее" всплывало окно. При выборе блока №2 и нажатии кнопки "Далее" - всплывало тоже самое окно. А уже выбрав блок №3 и нажав на кнопку "Далее" происходила бы переадресация на другую страницу. Как такое можно сделать?
HTML страницы
<div class="content">
<div class="block">
Блок №1
</div>
</div>
<div class="content">
<div class="block">
Блок №2
</div>
</div>
<div class="content">
<div class="block">
Блок №3
</div>
</div>
<div id="devepmen" class="mization">
<div>
<div class="dcovaeckponug">
<a href="#nugpemen" title="" class="nugpemen">Закрыть</a>
<p>Выберите другой блок</p>
<div class="ditional"></div>
</div>
</div>
</div>
<a href="#devepmen">ДАЛЕЕ</a>
JS для блоков
$(document).ready(function(){
$('.content .block').click(function(){
$('.content .block').removeClass('active');
$(this).addClass('active');
});
});
CSS для блоков
.content .block {
border: 2px solid #ddd;
padding: 0px;
text-align: center;
vertical-align: middle;
position: relative;
cursor: pointer;
margin-bottom:10px;
}
/* Hover */
.content .block:hover:after {
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
border: 3px solid #ffe5c5;
}
/* Click */
.content .block.active:after {
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
border: 3px solid orange !important;
}
CSS для окна
.mization {
position: fixed;
font-family: arial;
font-size: 83%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(14, 14, 14, 0.52);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.mization:target {
opacity:1;
pointer-events: auto;
}
.mization > div {
width: 523px;
position: relative;
margin: 5% auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #fff;
}
.mization .dcovaeckponug { padding: 8px 21px 7px 21px; min-height:200px;}
.dcovaeckponug {
background: #e2e2e2;
border-top: 1px solid #9c9696;
-moz-box-shadow: inset 0px 13px 12px -15px #757474;
-webkit-box-shadow: inset 0px 13px 12px -15px #615959;
box-shadow: inset 0px 13px 12px -15px #312e2e;
}
.dcovaeckponug p {
color: #bd371d;
text-align: right;
margin: 0;
padding: 5px;
}
.vas, .gameos, .nugpemen {
background: #4a4a4e;
color: #f1ebeb;
line-height: 24px;
text-align: center;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #232121;
box-shadow: 1px 1px 2px #484444;
padding: 1px 1px 0px 3px;
}
.vas, .nugpemen {
width:75px;
float:right;
margin-left:18px;
}
.vas:hover {
background: #0a5477;
}
.nugpemen:hover { background: #D4482D; }
.ditional { float:none; ditional: both;
}
