Jump to content


Photo
- - - - -

Modal covered by backdrop

modal

  • Please log in to reply
5 replies to this topic

#1 idealpractice

idealpractice

    Newbie

  • Members
  • 7 posts
  • Framework Version:2.4.3
  • Country: Country Flag

Posted 12 June 2013 - 01:59 AM

Hi there,

 

Pagelines version: 2.4.3

Browser(s): Firefox v21.0, Safari 6.0.3

 

I'm currently building a site (that will itself become a "template" of sorts), trying to reconsruct an existing layout that was originally created with Platform Pro, but this time using only built-in Pagelines features instead of thrid party plugins. Our sites traditionally have both "Contact Us" and "Appointment Request" buttons at both the top and bottom of the page. Previously these have triggered a lightbox type popup into which a page containing the appropriate form was loaded. I love the Modal functionality, so would like to replicate these buttons, but using the modal instead.

 

In the Header I've used the Universal Sidebar so that I can vary the style (with CSS) of the bar on a per site basis - for example on some it will scroll with the page, while on others it will be fixed, it also may have a solid or gradient background. For the Footer the section has just been added directly to the Footer sidebar. I have all of this displaying as per my requirements - with the CSS yet to be cleaned up - however I'm finding that while the buttons in the Header activate the Modal, the backdrop is covering it. The z-index of the elements seems to be correctly set, the same as if they're activated from the buttons in the Footer. The Footer buttons work as expected.

 

Is there a way of either fixing this - I've tried different z-index settings but they don't work - or is there a way of calling the Footer modal(s) from buttons in the Header (Universal Sidebar) instead of having multiple instances of the same modal?

 

The URL for the test site is here:

Please Login or Register to see this Hidden Content

 

Thanks in advance.



#2 Martin Davies

Martin Davies

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 12 June 2013 - 02:32 PM

I think z-index is the key to the solution here - i have changed the z-index for the poppy box and get the following 

Please Login or Register to see this Hidden Content

 

You may want to try relative and absolute positioning also as seen here 

Please Login or Register to see this Hidden Content

 

Please let us know how you get on. 



#3 idealpractice

idealpractice

    Newbie

  • Members
  • 7 posts
  • Framework Version:2.4.3
  • Country: Country Flag

Posted 13 June 2013 - 12:15 AM

Hi Martin,

 

Yes I got the same result as your image when playing with the z-index. What I'm seeing is one of the enclosing divs in the header has a class "outline" which has a z-index of 15. Setting the z-index of the backdrop to less than this displays the modal, but also the other elements in the header, which obviously isn't ideal. I've found that changing the position of that div (.outline) from relative to static seems to fix it, and doesn't seem to have any other negative impact, but I'm concerned that at some point down the track when I try other elements on the page - hero, callout, boxes etc - things might break.

 

Thanks for the help, I'll see how it goes.

 

:unsure:



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 June 2013 - 12:22 AM

Hi there,

 

Keep us posted if you have any problems, I've checked your site and yes it all seems to be working well. Responsively as well. If you do find anything changes as you add other elements drop us a post :-)



#5 idealpractice

idealpractice

    Newbie

  • Members
  • 7 posts
  • Framework Version:2.4.3
  • Country: Country Flag

Posted 13 June 2013 - 12:27 AM

Hi James,

 

Thanks yes I tested it Responsively too - a few tweaks still to do there - the modals don't seem to work very well on smaller screens so I might disable them for phones. I'll be using a landing page plugin for phones anyway, and it has a form tool included. Fingers crossed! :)



#6 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 June 2013 - 12:47 AM

Sounds good, fingers crossed :-)







Also tagged with one or more of these keywords: modal