Can someone explain to me why my solution isn't working? I'm trying to hide the scroll on my page when a modal is opened and allow scrolling within the modal. It would also be great if there could be a slide up & down effect.
I attempted to achieve this using JavaScript, but it's not functioning as expected:
$(function(){
$('.modal').click(function() {
$('body').css({'overflow': 'hidden'});
});
$('.close').click(function() {
$('body').css({'overflow': 'scroll'});
});
});
Here is my code:
<a class="modal" href="#openModal1">Box 1</a>
<div id="openModal1" class="modalDialog">
<a href="#close" title="Close" class="close">x</a>
<div class="middle">
Modal Box 1
This is a sample modal box that can be created using the powers of CSS3. You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.
</div>
</div>
<a class="modal" href="#openModal2">Box 2</a>
<div id="openModal2" class="modalDialog">
<a href="#close" title="Close" class="close">X</a>
<div class="middle">
Modal Box 2
Box 2
yadda yadda
</div>
</div>
.modalDialog:target > body { overflow:hidden; }
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,1);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 100ms ease-in;
-moz-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > .middle {
width: 80%;
position: relative;
margin: 10% auto;
padding: 10px 20px;
background: #fff;
overflow:scroll;
}
.close {
background: #fff;
color: #000;
line-height: 0px;
text-align: center;
position: absolute;
right: 10px;
top: 20px;
width: 24px;
text-decoration: none;
}
You can view the full example on this jsfiddle.