Закрытие 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'
→ Ссылка