Всплывающее окно открывается при нажатии блока (кнопки), с заданным классом. Так же срабатывает затемнение экрана.
Функции:
function opacshow(){ $(".jq_delta_opacity").css("height",$(document).height()).show(); } function bt_apply() { if( $('.jq_sendorders:visible').length>0 && +(+$('.jq_bt_sendscroll').height()+75+60+20+25)>$(window).height() ) $('.jq_bt_sendorders').addClass('bt_sendresize'); else $('.jq_bt_sendorders').removeClass('bt_sendresize'); } function bt_popzayavka() { opacshow(); $('.jq_bt_sendorders').fadeIn(); $('body, html').css({'overflow-x':'hidden','position':'relative'}); bt_apply(); } function closeall(){ $('.jq_delta_opacity').hide(); $('.jq_bt_sendorders').hide(); }
Вызов скриптов
$('body').on('click', '.jq_fillwin', function(){ bt_popzayavka(); return false; }); $('body').on('click', '.jq_bt_close', function(){ closeall();$('.jq_bt_sendorders').hide(); closeall();$('.jq_delta_opacity').hide(); }); $('.jq_delta_opacity').on("click", function(){ closeall(); });
При клике по всплывающему окну оно не сворачивается
$(document).click(function(event) { if ($(event.target).closest('.jq_delta_opacity').length) return; if ($(event.target).closest('.jq_bt_sendorders').length) return; closeall(); event.stopPropagation(); });
Класс который вызывает скрипты.
<span class="bt_snpt_borbot_dash jq_fillwin"><?=$arResult['DIRECTOR']['NAME']?></span>
Классы и блоки самого всплывающего окна
<div class="bt_sendorders jq_bt_sendorders idnone" > <div class="bt_close jq_bt_close"></div> <div class="bt_sendtitle ifont110"><?=Loc::getMessage('AN_WIN_TEXT')?></div> <div style="height:100%;overflow:auto"> <div class="bt_sendscroll jq_bt_sendscroll"> всплывающее окно контент </div> </div> </div>
Класс который указывается в файле футера (\tmpl\inc\tmpl\footer.php)
<div class="jq_delta_opacity idnone"></div>
Стили
/* ----------------------------------------------------------------------------------------------- Слой прозрачности */ .jq_delta_opacity{ background-color: black; display: none; height: 100%; width: 100%; left: 0; top: 0; opacity: 0.5; -ms-filter: "alpha(opacity=50)"; position: absolute; z-index: 999; } .bt_sendorders { background-color: #ffa0c3; left: 50%; margin-left: -300px; padding: 60px 20px 20px; top: 75px; width: 600px; z-index: 1000; position: fixed; } .bt_sendtitle { position: absolute; top: 20px; } .bt_sendresize { bottom: 25px; } .bt_close{ background: url('/tmpl/img/svg/close_2.svg') no-repeat left bottom / 19px auto; position: absolute; top: 0; right: 0; height: 39px; width: 39px; cursor: pointer; } .bt_sendscroll { overflow: auto; height: inherit; }