I'm currently working on a function to add and remove the CSS property .css('overflow-y','hidden') using an onclick event, which I have successfully implemented. However, I am encountering an issue when attempting to remove this CSS using another onclick event triggered by a different element.
The concept involves a modal window (utilizing Twitter Bootstrap 2.3) that displays some data. When the user clicks on a button within the modal, the CSS is applied to prevent scrolling of the website. The problem arises when the modal is closed and the overflow-y styling remains, preventing the page from scrolling properly.
I have developed the code up to this point but seem to be stuck and unable to identify where I may be making a mistake. I would greatly appreciate any assistance on resolving this issue, as well as any advice to avoid similar problems in the future.
Thank you!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>