Popup screen, text under selectable
If you click anywhere on the page, a popup will appear. This popup covers the screen, but if you click it three times, the last item p
is selected.
How can I prevent this?
PS: I am using JQuery in this example for simple click events, but not in a real application. I would prefer a solution without JQuery (plain JS is ok)
$('.wrapper').on('click', (e) => {
e.stopPropagation();
$('.popup').show();
});
$('.popup').on('click', (e) => {
e.stopPropagation();
$('.popup').hide();
});
$('.popupContent').on('click', (e) => {
e.stopPropagation();
});
.popup {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
}
.popupContent {
position:absolute;
left:10%;
top:10%;
width:80%;
height:80%;
background-color:rgba(255,255,255,1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<div class="popup">
<div class="popupContent">
</div>
</div>
</div>
+3
source to share
2 answers
In my testing, all you have to do is add text to the popup.
Easy to test by removing all text from something well established and testable like Bootstrap modal . The same thing happens when it is empty.
It should have something to do with selecting the nearest text node if it doesn't exist in the element. Because, as you can see, it picks the closest paragraph in your example.
$('.wrapper').on('click', (e) => {
e.stopPropagation();
$('.popup').show();
});
$('.popup').on('click', (e) => {
e.stopPropagation();
$('.popup').hide();
});
$('.popupContent').on('click', (e) => {
e.stopPropagation();
});
.popup {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
}
.popupContent {
position:absolute;
left:10%;
top:10%;
width:80%;
height:80%;
background-color:rgba(255,255,255,1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<div class="popup">
<div class="popupContent">test
</div>
</div>
</div>
+2
source to share