Commit 785f8a80 authored by Anton's avatar Anton
Browse files

+ popup

No related merge requests found
Showing with 135 additions and 6 deletions
+135 -6
......@@ -27,18 +27,18 @@ $(function() {
$anchor
.on('click', function() {
const $target = $($(this).attr('href'));
if($target.length) {
if ($target.length) {
const top = $target.offset().top;
scrollTo(top);
return false;
}
return false;
});
const $pSlider = $('#photo-slider');
if ($pSlider.length) {
$pSlider.slick({
prevArrow: '<div class="slider__prev"></div>',
nextArrow: '<div class="slider__next"></div>',
prevArrow: '<div class="slider__prev"></div>',
nextArrow: '<div class="slider__next"></div>',
responsive: [
{
breakpoint: 1200,
......@@ -50,5 +50,29 @@ $(function() {
});
}
const $modal = $('#modal');
$('[data-role="open-popup"]')
.on('click', function() {
const $target = $($(this).data('target'));
if ($target.length) {
$target.show();
$('body,html').css('overflow', 'hidden');
$modal.fadeIn(300);
return false;
}
});
$('[data-role="close-popup"]')
.on('click', function() {
$modal.fadeOut(300, function() {
$('.popup').hide();
$('body,html').css('overflow', 'auto');
});
return false;
});
$('#popup')
.on('click', function(e) {
e.stopPropagation();
});
console.log('Document ready');
});
\ No newline at end of file
......@@ -53,5 +53,23 @@
border-right: none
border-bottom: none
transform: rotate(45deg)
&_close
width: 48px
height: 48px
position: absolute
top: 0
right: 0
.line
width: 20px
height: 2px
position: absolute
left: 50%
top: 50%
margin: -1px 0 0 -10px
background: $gray-4
&:nth-child(1)
transform: rotate(45deg)
&:nth-child(2)
transform: rotate(-45deg)
&:hover
opacity: .8
@import 'variables'
#modal
display: flex
justify-content: center
align-items: center
width: 100vw
height: 100vh
position: fixed
left: 0
top: 0
background: rgba(0, 0, 0, .8)
z-index: 999999
#popup
width: 90%
height: 90%
max-width: 900px
max-height: 600px
position: relative
padding: 30px 0
background: #fff
border-radius: 10px
h2
margin: 26px 0
font-size: 32px
line-height: 1.25
+media(768)
margin: 52px 0
font-size: 52px
line-height: 1
h3
margin: 26px 0
font-size: 32px
line-height: 1.25
+media(768)
font-size: 42px
line-height: 1.19
p
margin: 10px 0
font-size: 16px
line-height: 1.56
+media(768)
margin: 20px 0
font-size: 20px
ul
padding-left: 30px
ol
padding-left: 30px
li
margin: 10px 0
font-size: 16px
line-height: 1.56
+media(768)
margin: 20px 0
font-size: 20px
.popup
overflow-x: hidden
overflow-y: auto
width: 100%
height: 100%
padding: 0 40px
......@@ -43,7 +43,7 @@
bottom: -1050px
+media(1200)
bottom: -1000px
[data-role="show-popup" ]
[data-role="open-popup" ]
display: block
margin: 16px 0
text-align: center
......
......@@ -399,7 +399,7 @@
<a href="#" class="btn btn_small btn_red">ПРИНЯТЬ УЧАСТИЕ</a>
</div>
<div class="col-12 col-xl-6">
<a class="text_gray" href="#" data-role="show-popup" data-target="#prize-rules">Правила розыгрыша призов</a>
<a class="text_gray" href="#" data-role="open-popup" data-target="#prize-rules">Правила розыгрыша призов</a>
</div>
</div>
</div>
......@@ -416,5 +416,31 @@
<a href="//profi.travel" target="_blank"><img src="/uploads/workshops/base_includes/logo_pt.png"> Проект компании ООО «Профи Трэвeл» 2020<!--{{ "now"|date("Y") }}--></a>
</div>
</footer>
<div id="modal" style="display:none" data-role="close-popup">
<div id="popup">
<div id="prize-rules" class="popup" style="display:none">
<h2>Имеется спорная точка зрения, гласящая примерно следующее</h2>
<p>Ясность нашей позиции очевидна: выбранный нами инновационный путь требует анализа форм воздействия. В частности, новая модель организационной деятельности влечет за собой процесс внедрения и модернизации инновационных методов управления процессами. Противоположная точка зрения подразумевает, что независимые государства освещают чрезвычайно интересные особенности картины в целом, однако конкретные выводы, разумеется, заблокированы в рамках своих собственных рациональных ограничений.</p>
<p>В целом, конечно, современная методология разработки однозначно фиксирует необходимость кластеризации усилий. Есть над чем задуматься: сделанные на базе интернет-аналитики выводы, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут рассмотрены исключительно в разрезе маркетинговых и финансовых предпосылок. Прежде всего, глубокий уровень погружения представляет собой интересный эксперимент проверки своевременного выполнения сверхзадачи. Значимость этих проблем настолько очевидна, что дальнейшее развитие различных форм деятельности создаёт предпосылки для системы массового участия.</p>
<ol>
<li>Ясность нашей позиции очевидна: выбранный нами инновационный путь требует анализа форм воздействия;</li>
<li>В частности, новая модель организационной деятельности влечет за собой процесс внедрения и модернизации инновационных методов управления процессами;</li>
<li>Противоположная точка зрения подразумевает.</li>
</ol>
<p>Внезапно, реплицированные с зарубежных источников, современные исследования в равной степени предоставлены сами себе. Стремящиеся вытеснить традиционное производство, нанотехнологии превращены в посмешище, хотя само их существование приносит несомненную пользу обществу. Вот вам яркий пример современных тенденций - убеждённость некоторых оппонентов обеспечивает актуальность переосмысления внешнеэкономических политик. Имеется спорная точка зрения, гласящая примерно следующее: непосредственные участники технического прогресса формируют глобальную экономическую сеть и при этом - объединены в целые кластеры себе подобных. Приятно, граждане, наблюдать, как элементы политического процесса, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут заблокированы в рамках своих собственных рациональных ограничений. Ясность нашей позиции очевидна: повышение уровня гражданского сознания напрямую зависит от поэтапного и последовательного развития общества.</p>
<ul>
<li>Внезапно;</li>
<li>реплицированные;</li>
<li>с зарубежных источников;</li>
<li>современные исследования;</li>
<li>в равной степени.</li>
</ul>
</div>
<a href="#" class="btn btn_close" data-role="close-popup">
<span class="line"></span>
<span class="line"></span>
</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment