Codly
html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
Не знаешь, какое окно выбрать?
<br>
<a href="#" id="start">Пройти тест</a>
<div id="popUp">
<span id="close">X</span>
<form name="form1">
<div id="f1">
<p>Какой тип помещения Вы хотите остеклить?<br>
<input type="radio" name="r1" value=1>
Квартира
<br><input type="radio" name="r1" value=2>
Дом, Коттедж круглогодичного проживания
<br><input type="radio" name="r1" value=3>
Дача летнего проживания
<br><input type="radio" name="r1" value=4>
Веранда или терраса
<br><input type="radio" name="r1" value=5>
Остекление крыши из стекла
<br><input type="radio" name="r1" value=6>
Общественные помещения здания
<br><input type="radio" name="r1" value=7>
Реставрация памятников архитектуры и старинных зданий
</p>
<p>
<input type="button" id="next1" value="Далее >">
</div>
<div id ="f2">
<p>Какие типы окон для квартиры Вас интересуют? <br>
<div id ="i010">
<input type="radio" name="r11" value="11">
Деревянные евроокна
</div>
<div id ="i020">
<br><input type="radio" name="r11" value="21">
Двухрамные деревянные окна (Русская столярка)
<div id ="i030">
<br><input type="radio" name="r11" value="31">
Финские окна
<div id ="i040">
<br><input type="radio" name="r11" value="41">
Окна РЕТА Hi Tech
<div id ="i050">
<br><input type="radio" name="r11" value="51">
Раздвижные окна
<div id ="i060">
<br><input type="radio" name="r11" value="61">
Американские (английские) окна
<div id ="i070">
<br><input type="radio" name="r11" value="71">
Деревянные евроокна (эконом вариант)
<div id ="i080">
<br><input type="radio" name="r11" value="81">
Готовые деревянные окна
<div id ="i090">
<br><input type="radio" name="r11" value="91">
Пластиковые окна
<div id ="i100">
<br><input type="radio" name="r11" value="101">
Однорамные деревянные окна (Русская столярка)
<br><input type="radio" name="r11" value="111">
Раздвижные алюминиевые окна
<br><input type="radio" name="r11" value="121">
Неотапливаемое холодное помещение
<br><input type="radio" name="r11" value="131">
Отапливаемоеиваемое жилое теплое помещение
<br><input type="radio" name="r11" value="141">
Неотапиваемое холодное помещение
<br><input type="radio" name="r11" value="151">
Готовые модули для теплой крыши
<p>
<input type="button" id="next2" value="Далее >">
</div>
</form>
</div>
<div id="overlay"></div>
</body>
</html>
css
#popUp {
top: 5%;
left: 50%;
height: 500px;
position: fixed;
width: 500px;
border-radius: 11px;
background: #fef;
margin-left: -250px;
margin-top: -250px;
display: none;
opacity: 0;
padding: 17px;
z-index: 6;
}
#popUp #close {
cursor: pointer;
position: absolute;
width: 23px;
height: 23px;
top: 17px;
right: 17px;
display: block;
}
#overlay {
z-index:4;
background-color:#010;
position:fixed;
opacity:0.86;
width:100%;
height:100%;
display:none;
top:0;
left:0;
}
#popUp01 {
top: 5%;
left: 50%;
height: 500px;
position: fixed;
width: 500px;
border-radius: 11px;
background: #fef;
margin-left: -250px;
margin-top: -250px;
display: none;
opacity: 0;
padding: 17px;
z-index: 6;
}
#popUp02 {
top: 5%;
left: 50%;
height: 500px;
position: fixed;
width: 500px;
border-radius: 11px;
background: #fef;
margin-left: -250px;
margin-top: -250px;
display: none;
opacity: 0;
padding: 17px;
z-index: 6;
}
#popUp03 {
top: 5%;
left: 50%;
height: 500px;
position: fixed;
width: 500px;
border-radius: 11px;
background: #fef;
margin-left: -250px;
margin-top: -250px;
display: none;
opacity: 0;
padding: 17px;
z-index: 6;
}
#popUp04 {
top: 5%;
left: 50%;
height: 500px;
position: fixed;
width: 500px;
border-radius: 11px;
background: #fef;
margin-left: -250px;
margin-top: -250px;
display: none;
opacity: 0;
padding: 17px;
z-index: 6;
}
#popUp05 {
top: 5%;
left: 50%;
height: 500px;
position: fixed;
width: 500px;
border-radius: 11px;
background: #fef;
margin-left: -250px;
margin-top: -250px;
display: none;
opacity: 0;
padding: 17px;
z-index: 6;
}
#popUp06 {
top: 5%;
left: 50%;
height: 500px;
position: fixed;
width: 500px;
border-radius: 11px;
background: #fef;
margin-left: -250px;
margin-top: -250px;
display: none;
opacity: 0;
padding: 17px;
z-index: 6;
}
#popUp07 {
top: 5%;
left: 50%;
height: 500px;
position: fixed;
width: 500px;
border-radius: 11px;
background: #fef;
margin-left: -250px;
margin-top: -250px;
display: none;
opacity: 0;
padding: 17px;
z-index: 6;
}
#popUp07 {
top: 5%;
left: 50%;
height: 500px;
position: fixed;
width: 500px;
border-radius: 11px;
background: #fef;
margin-left: -250px;
margin-top: -250px;
display: none;
opacity: 0;
padding: 17px;
z-index: 6;
}
#popUp10 {
top: 5%;
left: 50%;
height: 500px;
position: fixed;
width: 500px;
border-radius: 11px;
background: #fef;
margin-left: -250px;
margin-top: -250px;
display: none;
opacity: 0;
padding: 17px;
z-index: 6;
}
#popUp #close2 {
cursor: pointer;
position: absolute;
width: 23px;
height: 23px;
top: 17px;
right: 17px;
display: block;
}
#popUp01 #close01 {
cursor: pointer;
position: absolute;
width: 23px;
height: 23px;
top: 17px;
right: 17px;
display: block;
}
js
hide('f110');
/*открываю попап*/
$(document).ready(
function() {
$('a#start').click(
function(event){
event.preventDefault();
$('#overlay').fadeIn(250,
function(){
$('#popUp')
.css('display', 'block')
.animate({opacity: 1, top: '55%'}, 490); });
});
/*по нажатию на крестик закрываю окно*/
$('#close, #overlay').click( function(){
$('#popUp')
.animate({opacity: 0, top: '35%'}, 490,
function(){
$(this).css('display', 'none');
$('#overlay').fadeOut(220);
}
);
});
}
);
next1.onclick = function(obj){
var form1 = this.form,
vib = form1.r1.value;
if (vib == '1'){
hide('f1');
show('f110');
}
if (vib == '2'){
hide('f1');
}
if (vib == '3'){
hide('f1');
}
if (vib == '4'){
hide('f1');
}
if (vib == '5'){
hide('f1');
}
if (vib == '6'){
hide('f1');
}
if (vib == '7'){
hide('f1');
}
}
function show (element_id) {
if (document.getElementById(element_id)) {
var sh = document.getElementById(element_id);
sh.style.display = "block"; //Показываем элемент
}
}
function hide (element_id) {
if (document.getElementById(element_id)) {
var hd = document.getElementById(element_id);
hd.style.display = "none"; //Скрываем элемент
}
}