Закрытие Poop-up при выборе файла
Возникла проблема с poop-up. Заключается она в том, что при выборе файла через input file, всплывающее окно poop-up закрывается, из-за чего не представляется возможным взаимодействие с выбранным файлом.
function openPopup(elem) {
$(elem).next().fadeIn(200);
$(elem).next().siblings(".popup").hide();
$('body').css('overflow', 'hidden');
}
function closePopup() {
$('.fon').fadeOut(300);
$('body').css('overflow', 'visible');
}
$('.fon, .cansel').click(function(e) { // при клике проверяем
if(e.target.className != 'popup') { // что кликнули не по самому окну
closePopup(); // и тогда вызываем функцию закрытия окна
}
})
.popup {
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
margin:auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid red;
z-index:999999999999999999;
}
.cancel {
display:relative;
cursor:pointer;
margin:0;
float:right;
height:10px;
width:14px;
padding:0 0 5px 0;
background-color:red;
text-align:center;
font-weight:bold;
font-size:11px;
color:white;
border-radius:3px;
z-index:100000000000000000;
}
.cancel:hover {
background:rgb(255,50,50);
}
.fon{
display:none;
position: fixed;
margin: 0px;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onClick="openPopup(this);">open div1</div>
<div class="fon">
<div class="popup">
<input type="file" name="SrcGallery" class="inputFile"><br>
<input type="submit" name="addLineGallery" class="inputButton" value="Upload">
<div class="cancel"></div>
</div><script src="AdminFile/Poop-upJ.js"></script>
</div>
Буду крайне благодарен всем кто откликнется!
Ответы (1 шт):
Автор решения: Armen
→ Ссылка
if(e.target.className != 'popup') { // что кликнули не по самому окну... а точнее куда угодно внутри попап кроме того элемента у которого className === 'popup'