14 ноября 2021 в 15:02
Добрый день не могли бы вы подсказать в чем у меня проблема в коде всплывающего окна?
Создается блок с HTML:
<div class="exitblock">
<div class="fon"></div>
<div class="modaltext">
Текст, который по вашему мнению должен увидеть посетитель перед уходом.
</div>
<div class="closeblock">+</div>
</div>
<div class="fon"></div>
<div class="modaltext">
Текст, который по вашему мнению должен увидеть посетитель перед уходом.
</div>
<div class="closeblock">+</div>
</div>
Добавляем в таблицу стилей CSS:
.exitblock {
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:100000;
}
.exitblock .fon {
background: #F6FCFF;
opacity:.8;
position:fixed;
width:100%;
height:100%;
}
.exitblock .modaltext {
box-sizing: border-box;
padding:20px 40px;
border: 2px solid #AEAEAE;
background: #F6FCFF;
position:fixed;
top:80px;
left:50%;
margin-left:-30%;
width:60%;
box-shadow: 0 4px 10px 2px rgba(0,0,0,0.5);
}
.closeblock {
cursor:pointer;
position: fixed;
line-height:60px;
font-size:82px;
transform: rotate(45deg);
text-align:center;
top:20px;
right:30px;
color: #337AB7;
}
.closeblock:hover {
color: #000;
}
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:100000;
}
.exitblock .fon {
background: #F6FCFF;
opacity:.8;
position:fixed;
width:100%;
height:100%;
}
.exitblock .modaltext {
box-sizing: border-box;
padding:20px 40px;
border: 2px solid #AEAEAE;
background: #F6FCFF;
position:fixed;
top:80px;
left:50%;
margin-left:-30%;
width:60%;
box-shadow: 0 4px 10px 2px rgba(0,0,0,0.5);
}
.closeblock {
cursor:pointer;
position: fixed;
line-height:60px;
font-size:82px;
transform: rotate(45deg);
text-align:center;
top:20px;
right:30px;
color: #337AB7;
}
.closeblock:hover {
color: #000;
}
JS с погрузкой библиотеки jQuery:
($(document).mouseleave(function(e){
if (e.clientY < 10) {
$(".exitblock").fadeIn("fast");
}
});
$(document).click(function(e) {
if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
$(".exitblock").remove();
}
});)(jQuery);
if (e.clientY < 10) {
$(".exitblock").fadeIn("fast");
}
});
$(document).click(function(e) {
if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
$(".exitblock").remove();
}
});)(jQuery);
Комментарии
Опишите лучше для начала алгоритм (словами) как это должно работать
Когда курсок мыши направляется на закрытие страницы, автоматически всплывает окно, где сплывает Опросник почему вы хотите покинуть страницу.
Drupal.behaviors.exampleModule = {
attach: function (context, settings) {
$(document).mouseleave(function (e) {
if (e.clientY < 10) {
$(".exitblock").fadeIn("fast");
}
});
$(document).click(function (e) {
if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
$(".exitblock").remove();
}
});
}
};
}(jQuery));
Спасибо то что нужно!!!