32510

Scrolling only the distance of a modal on smaller screens with media queries

Question:

I have a modal that pops up on an onclick event. Basically it adds a greyed out layer over the page, then adds a modal div one z-index higher over the grey. The problem I am running into is for smaller screen sizes you can scroll down the body.

I have tried toggling body { overflow:hidden }

this works except for when the modal has more content that needs to be seen that exceeds the initial view. Ideally you would be able to see only the modal on smaller screens and scroll down it if needed. Thanks.

Answer1:

Here's my <a href="http://jsfiddle.net/mgGS7/" rel="nofollow">attempt</a>.

HTML

<div class = "popup"> <div class = "over"></div> <div class = "window"> <button class = "close">Close</button>

Filler

Filler

Filler

<button class = "close">Close</button> </div> </div> <div class = "content">

Filler

<button class = "pop">Popup</button>

Filler

Filler

<button class = "pop">Popup</button>

Filler

</div>

CSS

body { margin:0; } p { margin:0; height:200px; background-color:yellow; } .popup { position:fixed; top:0; left:0; width:100%; height:100%; display:none; z-index:1; } .over { width:100%; height:100%; background-color:gray; opacity:0.5; position:absolute; z-index:-1; } .window { border:1px solid black; width:50%; height:100%; overflow:auto; margin:0 auto; background-color:orange; } .content.paused { position:fixed!important; width:100%; height:1000%; overflow:hidden; z-index:0; }

JQUERY

var scroll; $('.pop').click (function () { scroll = $(document).scrollTop (); $('.popup').show (); $('.content').offset ({top:-scroll}).addClass ('paused'); }); $('.close').click (function () { $('.popup').hide (); $('.content').removeClass ('paused').removeAttr ('style'); $(document).scrollTop (scroll); });

This requires the page content to be inside a div that is separate from the popup. When you click the button, the current scroll position is saved, then the page content is positioned fixed and moved above the top of the page by the same amount as the scroll. So if you scrolled down 100px, the top of the content will be 100px above the top of the screen, to preserve the visual position of the content. The content will no longer be scrollable because I set the height to be insanely large.

The popup will just be any regular div, with a max height and scrollbars if needed.

When you close the popup, the page content is restored to its original state, the fixed position is removed, top displacement removed, and the page's scroll position is set back to what it was before.

Answer2:

Try to add these attributes to your modal container div:

.modalContainer{ max-width: 500px; //maximum width of the size of the modal position: relative; width: 85%; //can be how much of the screen you want it to take up }

Recommend

  • UWP : Print with out Printer Popup Dialoag
  • Opening links in a new tab and only the new tab
  • Need help centering a div class on page
  • Is there an API (SOAP, JSON, XML-RPC, REST, anything) to Google Code Issues?
  • How to know if a JFrame is on screen in a multi screen environment
  • How to get the index of element in the List in c#
  • Google Calendar Api is not showing event list
  • Implementation of RTTI using typeid
  • Using an STL Iterator without initialising it
  • MeeGo Handset Emulator not starting on Windows 7
  • Invalid Date on validation Date of js
  • JqueryMobile Popup menu is not working
  • Reading a file into a multidimensional array
  • Object and struct member access and address offset calculation
  • Needing to do .toArray() to get output of mongodb .find() on key name not value
  • Hardware Accelerated Image Scaling in windows using C++
  • Magento Fatal error: Maximum execution error solution, on WAMP
  • Alert pop up with LWUIT
  • Android fill_parent issue
  • Reading JSON from a file using C++ REST SDK (Casablanca)
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Android screen density dpi vs ppi
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • Optimizing database types to compact database (SQLite)
  • TFS: Get latest causes slow project reloading
  • Running a C# exe file
  • jquery mobile loadPage not working
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Cannot Parse HTML Data Using Android / JSOUP
  • AngularJs get employee from factory
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Java static initializers and reflection
  • unknown Exception android
  • Reading document lines to the user (python)
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?