Здравствуйте уважаемые разработчики!
Нужна ваша помощь! Сразу говорю, что в js не силен, так что за код сильно не критикуйте.
Кратко объясняю суть проблемы: у меня есть всплывающее окно, которое срабатывает, если мышка покидает пределы окна. В Chrome и в Opera всё работает нормально, а вот в Firefox есть проблема... событие mouseout срабатывает и тогда, когда хочешь выбрать элемент из всплывающего списка.
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window, "load", function (e) {
$('#modal_form').css('display', 'none');
addEvent(document, "mouseout", function (e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
console.log(from);
if (!from || from.nodeName == "HTML") {
$('#overlay').fadeIn(400, function(){
$('#modal_form').css('display', 'block').animate({opacity: 1, top: '26%'}, 200);
});
}
}
});
});
В Firefox при наведении на элемент выпадающего списка переменная var from = undefined, а в Chrome к примеру всё нормально, там функция addEvent(document, "mouseout", function (e)) даже не срабатывает на выпадающем списке.
Подскажите пожалуйста, как можно исправить эту проблему с выпадающим списком в Firefox? или возможно нужно другое событие использовать?
Вот пример:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
body {width: 100%;
height: 100%}
#modal_form {
position: fixed;
display: block;
opacity: 0;
z-index: 5;
background: green;
-webkit-background-size: cover;
background-size: cover;
width: 200px;
height: 200px;
border: 4px solid #ff0000;
}
#modal_form #modal_closes {
width: 21px;
height: 21px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: block;
}
#overlay {
z-index:3;
position:fixed;
background-color:#000;
opacity:0.8;
-moz-opacity:0.8;
filter:alpha(opacity=80);
width:100%;
height:100%;
top:0;
left:0;
display:none;
}
</style>
<script>
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window, "load", function (e) {
$('#modal_form').css('display', 'none');
addEvent(window, "mouseout", function (e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
$('#overlay').fadeIn(400, function(){
$('#modal_form').css('display', 'block').animate({opacity: 1, top: '26%'}, 200);
});
}
});
});
$(document).ready(function() {
$('#modal_close, #overlay').click( function(){
$('#modal_form').animate({opacity: 0, top: '45%'}, 200, function(){
$(this).css('display', 'none');
$('#overlay').fadeOut(400);
});
});
})
</script>
</head>
<body>
<select name="srok">
<option value="">Выберите срок...</option>
<option value="0.1">1 неделя</option>
<option value="0.2">2 недели</option>
<option value="0.3">3 недели</option>
</select>
<select name="srok">
<option value="">Выберите срок...</option>
<option value="0.1">1 неделя</option>
<option value="0.2">2 недели</option>
<option value="0.3">3 недели</option>
</select>
<div id="modal_form" style="display:none">
<div class="wrap-close">
<span id="modal_close"></span>
</div>
</div>
<div id="overlay"></div>
</body>
</html>