I am using a Jquery lightbox popup type to display data over a page onclick.
Pretty basic: when the popup is not used, its hidden, then visible when a link is clicked.
Problem is when the data is the popup is very long, it stretches the page even when hidden, leaving a bunch of blank space at the bottom of my page.
How do I get hidden popup to not stretch out my page?
you can solve it with css:
set hight and width and then set overflow:hidden or scroll or auto
or
set display:none
and with jquery you can hide your element: $(element).hide()
Related
I want to popup the whole div that contain image,div,etc . but problem is that when i popup div the position of within div is changed. i want to zoom the div that display like popup and cover the whole page.
when i click on div the div should be popup and zoom. not changed the position of content with in it.
Use CSS and change z-index of the div so it's on a new layer. Need sample to help you apply a solution.
I am using a fixed overlay div on my page to show additional content when the user clicks on a certain button.
The trouble with this is that on iOS, the content behind tends to scroll rather than the overlay div.
The only effective solution I have found to this is to use jQuery to alter the class of and toggle its position to fixed (and overflow: hidden) whenever the overlay div is selected to appear (and then back again on closing the overlay). E.g.
$(document).ready(function(){
$("#filter-btn, .close-filter").click(function(){
$("body").toggleClass("fix");
});
});
Whilst this works, it also causes the content within the body itself to move up to the top of the page when changing to 'fixed' to the top which is monentarily visible whilst the fixed overlay div fades in.
Is there anyway I can prevent this from happening?
This can generally be solved by setting body height to 100% and overflow:hidden within the css rule for class applied to the body
I am trying to prevent my page from moving when i open a modal which is caused from the scrollbar. Originally the page would keep moving several pixels to the left and not move back each time i opened a new modal. I had to apply this css to solve that problem:
padding-right:0px !important;
margin-right:0px !important;
But now even though the page shifts back, when either the login modal or register modal is open and you press 'Sign up here', or 'Sign in here' from the loginmodal or registermodal, the scrollbar hides and then reappears which shifts the page before moving back to its original position. I experimented briefly and added overflow:scroll to the element, i didn't like the idea of the two scroll bars when the page is below a certain resolution.
So my question is:
How do i stop the scrollbar from hiding and reappearing when opening a modal when another model is already open which causes the page to shift left then back to its original position.
Here is my JSFiddle:
https://jsfiddle.net/w07dx8jk/
EDIT:
Would it be possible to have a blank scrollbar visible when a modal is open to stop it from disappearing which causes the shifting or is there a better method?
Usually, you simply leave the scrollbar visible, so it won't flicker:
html {overflow-y: scroll;}
You need to apply overflow-y: scroll !important to body to prevent the page move, !important is required because Bootstrap applies some of its own CSS to body and you need to override them.
And then apply overflow: hidden to .modal to prevent the double scrollbars.
Demo: https://jsfiddle.net/alan0xd7/w07dx8jk/1/
I use a Bootstrap Modal, to show bigger version of thumbnails in a photo gallery.
The default behavior of Bootstrap is to place the bootstrap at the top of the viewport, which usually is quite alright. But in this case, people are using the gallery in an iframe. Because of this, I want the modal dialog appears in the same height as the top of the gallery div.
I've tried positioning the modal dialog with CSS (top: 123px) but since the content above the gallery is constantly changing, this won't work. I would love to position the modal relative to the gallery with all the images.
EDIT: The link to the code is: http://bit.ly/1JCpZ9a
Just do as you mentioned! Position it relative :-)
#myModal {
top:0;
position: relative;
}
Just make sure that the modal markup immediately follows the gallery. The content after the gallery is going to jump down when the dialog appears - but I'm hoping that you don't have content (you mentioned it was an iframe)
Otherwise you'll need to have a wrapper div wrapping this extra content and position the modal absolutely w.r.t that wrapper div.
I'm trying to create a popup which uses window scrollbars not the div ones. Something like what is on http://pinterest.com. How to achieve this effect? All my tries are unsuccessful, scrollbars appear on div. Window scollbars scroll the body content.
When you open popup window, you should remember current window scrollLeft/scrollTop positions somewhere, then apply overflow:hidden, height/width:100% to html and body, which will prevent page scrolling.
Create overlay div with position:absolute, z-index:9999, left/top:0, height/width:100%, overflow:auto, and append it to body - it will be scrollable container of your popup.
Inside of this container create div with position:absolute and left/top values, calculated in js to center it if necessary.
After you close popup, restore overflow, height/width styles for html/body, and apply scrollLeft/scrollTop values that were saved before opening popup.