1

В редакторе

1

zavodreta
383
2018-05-08 10:18:46
76c60b65
<!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>
#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; }
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"; //Скрываем элемент } }
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика