Issue with modal popup in scrolling page with fixed footer using CSS; Modal not shown if content scrolled down<div id="main_container"> RSS

• • Reply
  

  rlindabury

  Member

  52 Points

  30 Posts

  Issue with modal popup in scrolling page with fixed footer using CSS; Modal not shown if content ...

  Feb 27, 2012 10:23 PM|LINK

  This isn't your typical situation I imagine.  I have modal popups on various pages of my application and they work fine. However, I recently redesigned the master page and now I'm having an issue with the *position* of my modal popups.

  I'd changed the master page to set a footer bar that never moves from the bottom of the page using html/css.  The blocks are as follows:

  <div id="main_container">
  

              <div class="content_wrapper">
                  <asp:contentplaceholder id="MainContent" runat="server"></asp:contentplaceholder>
              </div>

  <div class="footerspacer"></div>
  

  <div id="footerContainer"></div>

  With my CSS this simple framework allows my footer information to constantly stay at the bottom of the window even when scrolling content or resizing the window.  The footer doesn't scroll because I have the following set in CSS:

  body,html { overflow: hidden; }

  #main_Container { overflow: auto; }

  #footerContainer 
  {
  	position: absolute;
  	overflow: hidden;
  	bottom: 0px;

  }

  The problem now is that when I have a long page and you scroll the content down and there's a button for a popup, the popup doesn't display in the center of the window, it displays as if the content wasn't scrolled down at all so you only see the very bottom of the popup (more or less depending on how far the page was scrolled down).

  Does anyone know of a simple fix for this behavior?  Do I need to change my fixed footer to be set via javascript instead of this simple html/css method?

  Thanks in advance for your suggestions.

  css Modalpopup

• • Reply
  

  skcookie

  Member

  534 Points

  138 Posts

  Re: Issue with modal popup in scrolling page with fixed footer using CSS; Modal not shown if cont...

  Feb 27, 2012 10:28 PM|LINK

  you can use JQuery to set the position css of the modal popup.

  or

  you could so set the z-index of the modal popup to a higher value than the footer which might cause it to load as expected

  css Modalpopup

  Thanks,
  
  Patrick P.
  Microsoft Certified Professional
  
  Remember to mark as answer where appropriate!
• • Reply
  

  rlindabury

  Member

  52 Points

  30 Posts

  Re: Issue with modal popup in scrolling page with fixed footer using CSS; Modal not shown if cont...

  Feb 28, 2012 03:50 PM|LINK

  Thanks for the reply. I simply changed my CSS and set the footer css to fixed and gave it a high z-index so it's always over-top of the content. I also set a "push" div to be a few pixels taller than the footer to make sure that no content is behind the footer when the page is scrolled all the way down.  I removed all the overflow css.

  Modals now work as they should.

  css Modalpopup

  • Marked as answer by Song-Tian - MSFT on Mar 01, 2012 06:24 AM