Сообщение от Griffter
|
|
когда открываешь выпадающий список и пытаешься выбрать элемент, то оно считает, что я нахожусь за пределами браузера или не в этом диве, и срабатывает mouseout/mouseleave
|
А если остановить событие mouseout при наведении на select?
<html>
<head>
<script src="http://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);
});
});
//Добавила 3 строчки
$('select, option').hover(function(event){
event.stopPropagation();
})
})
</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>