Is it possible to remove scroll of body page when a modal window is opened from css?
For example my body page has a height:200% so if I want to go on the bottom of page I must use scroll (overflow-y:auto). Now if I will open a modal window the scroll of body page remain active and I want it be disabled when a modal window is opened.
Thank you.
If you are opening a modal window when a link is click you can do the following:
// modal screen activate $('a').live('click', function(){ modalScreen.show(); $('body').css('overflow','hidden'); }); // modal screen de-activate $('body, html').live('click', function(){ modalScreen.hide(); $('body').css('overflow','auto'); }); I assume you are opening your lightwindow using javascript:
You could than just set the height of the body to 100% and set overflow-y to hidden. That will remove the scrollbar.
You will have to reset everything on close of the lightwindow.
Use position:fixed and set your left and top to percentages, then margin-left to a negative value of the width in pixels. e.g. width: 700px; left: 50%, margin-left: -350px; in order to center horizontally.
Or just add and remove classes to your script:
$('body').addClass('modal-open'); //when modal is open $('body').removeClass('modal-open'); //when modal is closed Then you can go to your css file and add multiple css styles. For hiding the scroll bar use:
.modal-open { overflow: hidden; } Especially when you want to change more things I prefer this way, but that's my opinion. Use whatever you like!
position:fixedfor the modal window it will remain in place on the screen even if the user scrolls up or down.