1

I'm building a lightbox that pops up a div called #lightbox when the <a href="#lightbox">is clicked and the :target property is used. So when you click that link the CSS to make the box visible would be #lightbox:target {display: block}. I am looking to apply CSS properties to the #page_wrap id when the lightbox is the :target but I think I'm missing something because my solution isn't working.

I want to apply the following CSS to the #page_wrap when #lightbox:target:

overflow: hidden

The current CSS I have isn't working.

#lightbox:target + #page_wrap {overflow: hidden}

Here's my codepen.

Matthew Beckman
  • 1,702
  • 2
  • 16
  • 28

1 Answers1

1

This jQuery code should work for you:

$("#lightbox").click( function(){ $("#page_wrap").css("overflow","hidden"); } );

Place this in your header:

<script>
jQuery(document).ready(function($){

$("#lightbox").click( function(){ $("#page_wrap").css("overflow","hidden"); } );

});
</script>

If you are not calling jQuery would would also need:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

in the header above the above script.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
petebolduc
  • 1,233
  • 1
  • 13
  • 20
  • Is javascript the only solution here? What about a pure CSS solution? – Matthew Beckman Feb 27 '14 at 22:10
  • 1
    not sure about pure css... jquery is so prevalent in today's programming that I find it easier because it opens so many doors – petebolduc Feb 27 '14 at 22:15
  • 1
    @MattBeckman I was about to post an answer but was beat to it. Javascript is really the only way to do this. CSS3 selectors aren't robust enough to target any element when it's not the one with the pseudo class (like :hover or :target). If the element you wanted to select was somehow related to #lightbox (such as a direct child #lightbox:target > .child) then you could do pure CSS. – Joseph Hansen Feb 27 '14 at 22:20
  • http://stackoverflow.com/a/797343/756329 No way for CSS selectors to ascend. Darn. – Joseph Hansen Feb 27 '14 at 22:47
  • @jmh010 This code doesn't work. In order to get the `overflow:hidden` to apply to the `#page_wrap` you have to open the lightbox then click the div. I need code that will apply the CSS on a click of the ``, not when the actual div itself is clicked. – Matthew Beckman Mar 02 '14 at 22:56