Hey folks, I managed to do what I wanted, but it involved custom code and a lotta thinking haha. I went back to the start and this is what I did.
This is my structure:
1. modal
(with combo-class that controls z-index only cause I wanna do interaction on other popups too… visibility goes to display: hidden
when I wanna hide it to see everything else, ofcourse):
2. iconClose1
3. modalCon
4. modalGrid
(you put all of the content in this, margins are just a personal preference too)
I’ve also put IDs on itemWork
which opens my modal and iconClose1
which closes my modal.
iconClose1
itemWork
Custom code I used and adjusted a bit:
<script type="text/javascript">
$(document).ready(function() {
$('#open-modal')
.css('cursor', 'pointer')
.click(function(e) {
e.preventDefault()
$('body').addClass('no-scroll')
})
$('#close-modal')
.css('cursor', 'pointer')
.click(function(e) {
e.preventDefault()
$('body').removeClass('no-scroll')
})
})
</script>
<style>
.overflow-hidden {
overflow: hidden;
}
.no-scroll {
pointer-events: none;
overflow: hidden;
}
.no-scroll .modal {
pointer-events: all;
}
.modalcon {
-webkit-overflow-scrolling: touch
}
</style>
So there’s that! I guess we can close this thread now. Thank you all for your help, you’re amazing!