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.
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'm attempting to expand and transition a button into a modal that's 60% of the height and width of the window when it is clicked. Here's a CodePen of my work so far: http://codepen.io/anon/pen/WbNONa. The problem I'm having is that the position property can't be transitioned. Both the button and the modal (which is underneath the button) are absolutely positioned inside the button wrapper to make both elements look like one element. When the button is clicked, the modal should expand to a fixed position on top of the overlay.
The issue is that the positioning immediately changes from absolute to fixed, so the modal just looks like it's contracting from the full window size. If you delete the position: fixed property on the #btn-content.active class, you can see what I'm essentially trying to do. How can I emulate the transition of the position property? If that's not possible, how can I have the modal transition to a height and width that are relative to the size of the window? Thank you kindly for your time.
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()
I am making a responsive tool with an iframe. It does not display the correct width because of the scrollbar. Here's what I want to do. I want to hide the scrollbar in the iframe(it will then show the correct width), then I would like it to somehow be scrollable from a scrollbar outside of the iframe. Is this possible???
I have a web page with a long list of products. Next to each product there is a link to view details about the product. The details are displayed in a modal window.
The goal is to get the same behavior you can experience when looking at pictures on facebook:
the modal window is displayed on ~50px from the top
if the modal window height is greater than the viewport height than the user can scroll down (the scroll bar is now working toward the modal window NOT the page which is in the background)
when the modal window is closed the user is at the same position in the list of products as it was before it opened the modal window.
I am almost there, expect for the last requirement. The way I have implemented this is by simply opening the modal window with JS and then use:
var winH = window.pageYOffset + 50
$('#show_message_overlay').css('top', winH+"px");
to position the modal window.
Feel free to suggest a better approach.
Thanks for any help.
The solution turns out to be more complex than I thought:
create the modal window inside a div that has the same width and height as the body element
store the scroll offset before showing the modal window
show the modal window with JS (note that the modal window div now cover the all viewport)
with JS set the scroll css value of the body element to hidden (this will remove the scroll bars from the page)
set the overflow value of the element that contains the modal window to scroll (this can be done in the css file), this will now create scroll bars if the model window is bigger than the viewport
ENJOY your awesome modal window and scroller!
once the window is closed reset the scroll offsets using JS
Isaac Schlueter over at FooHack.com has put together a great example of a CSS Modal Dialog Box that exactly fits your requirements:
http://foohack.com/2007/11/css-modal-dialog-that-works-right/
From the article:
Interaction with the contents of the parent window should be impossible until the modal is dealt with. Scroll-mouse should not scroll the background page, clicking should not click the background page, tabbing should not get you there, etc.
When you dismiss the modal, the parent window should be exactly how you left it.
The parent window should be dimmed, or there should be some other indicator that it is currently not available for interaction. This has the corollary effect of making the modal “pop” a bit more.
In a web page, a modal should be constrained within the viewport. Opening a new window just to show a dialog box is ugly as a bucket of slugs.
The modal should be placed consistently. If it is not movable, then it should be centered vertically and horizontally. This positioning should be consistent if the parent window is resized or moved.
The modal should be smaller than the parent window. If the viewport is resized smaller than the modal, then scrollbars should appear that allow the user to see the rest of the modal.
If the page's scroll bar is being altered because of user's scrolling on the modal window, you can save the page scroll position while opening the modal bar and than on closing the modal window you can set the page scroll position to the position you have saved.