Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Brandon Brigham
Brandon Brigham
3,716 Points
Posted by Brandon Brigham
Brandon Brigham
3,716 Points

How to make modal overlay everything on page when it pops up

Hello,

So if you visit the site I'm working on here: http://everythingpropertymanagement.com

and you enter in the top search bar some word or phrase, let's say "property management" then there are search results that pop up. But then you will notice the top left logo is interfering with the popup and also causing the close "X" not to function.

Also if you scroll down with the modal still open elements on the page are overlapping the modal.

Any ideas on how to fix this?

I've messed with the z-indexes but nothing is seeming to change it.

BTW this is a WordPress plugin - Google Custom Search

Thanks for any help!

Maxwell Carlson
Maxwell Carlson
7,265 Points

Just so you know I get a 509 error, saying that your bandwidth limit has been exceeded.

1 Answer

Steven Ventimiglia
Steven Ventimiglia
27,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 Points

We can't seem to access the page, however...

  1. Use F12 to inspect elements if you aren't already. It's more informative than a simple "View Source".
  2. Make sure that the z-index of the modal is higher than the other elements, including the images.
  3. Give the modal a fixed position (not absolute), as well. This should always be checked on touch devices.

If it's a hosted solution, then pasting code may not be as effective as wrapping it in something that you can control better. Try to get something up so we can access it.