Archived

This topic is now archived and is closed to further replies.

  • 0

Modal covered by backdrop


Question

Posted · Report post

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: http://www.medicalwebsite.com.au/testsite-pagelines-1/

 

Thanks in advance.

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

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 http://d.pr/i/51SR

 

You may want to try relative and absolute positioning also as seen here http://css-tricks.com/almanac/properties/z/z-index/

 

Please let us know how you get on. 

Share this post


Link to post
Share on other sites

Posted · Report post

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:

Share this post


Link to post
Share on other sites

Posted · Report post

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 :-)

Share this post


Link to post
Share on other sites

Posted · Report post

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! :)

Share this post


Link to post
Share on other sites

Posted · Report post

Sounds good, fingers crossed :-)

Share this post


Link to post
Share on other sites