Jump to content
Sign in to follow this  
idealpractice

Modal covered by backdrop

Recommended Posts

idealpractice    0
idealpractice

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
greenfly    230
greenfly

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. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
idealpractice    0
idealpractice

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
idealpractice    0
idealpractice

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
James B    436
James B

Sounds good, fingers crossed :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Jesper
      By Jesper+
      Is there a way to create modal popups? It was possible ind DMS2
    • arcangel
      By arcangel
      Hi
      I hope someone can help I have built a landing page for my client using Pagelines DMS.
      http://inspire.arcangel.com/landing-page/
      At the bottom of the page there are some flags each opens a different modal with a 'RightSignature' contract within an Iframe.
      All works fine on a desktop, but for some reason when trying to go to the landing page on a handheld device it starts loading the page then all of a sudden it loads up a page displaying one of the contracts instead.
      Does anyone know what could be causing this? or think of a solution?
      Many thanks
      Lee
       
    • yemoonyah
      By yemoonyah+
      Hi,
       
      I created a modal with a registration form inside (using the Pagelines modal shortcodes).
       
      On top of the form and right before the submit button there are huge white spaces that I can't seem to get rid of. I tried using Chrome Developer tools but I just can't figure out what is going on and how to fix it.
       
      It's not an issue with the S2member registration form because outside the modal it works fine.
       
      http://CreativeWebBiz.com/challenge 
       
      (click on 'I'm in" button to open the modal)
       
       
      Pagelines, WP and all plugins are up to date
      Host: WP Engine
       
       
      Any suggestions?
       
      Thanks
      Yamile
    • ketri
      By ketri
      Hi!

      When I insert a youtube-embed inside a modal, it won't work. I tried to have:
       
       <div class=" fitvids">         <iframe  src="//www.youtube.com/embed/88NV75YRAnc?&iv_load_policy=3&theme=light&color=red&rel=0&showinfo=0&autohide=1&enablejsapi=1" frameborder="0"  allowfullscreen></iframe>       </div> But that won't work on mobile either.

      Thank you!
       
    • ketri
      By ketri
      https://www.dropbox.com/s/6eszqbgciqumxre/Screenshot%202014-08-15%2012.41.48.png
      If I'm using custom fonts (like typekit) I'll need to override these here also...

      Thank you very much!
×