Возникла проблема при оформлении всплывающего окна на JQ.
Суть проблемы заключается в том, что объект закрывается при нажатии на белое поле внутри всплывающего окна.
Я был бы вам крайне благодарен, если поможете мне с моей проблемой.
body {
height: 2000px;
}
.popup {
position: fixed;
display: flex;
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" onclick="closePopup();">
<div class="popup">
This is a test message div1
<div class="cancel" onclick="closePopup();"></div>
</div>
</div>
<script>
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');
}
</script>