Всплывающее окно открывается при нажатии блока (кнопки), с заданным классом. Так же срабатывает затемнение экрана.
Функции:
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;
}