CODEWITHSUNDEEP
htmlcss
Seba99
Seba99

Reputation: 1309

How to "lightbox" a div non clickable for disapear ? [Without JS]

I want my score's div beeing a lightbox when cliking on that link :

<a href="#test">TEST</a>

But we don't want to make it disapear by clicking on the div, JUST only on the black background !

here are my tries :

<a id="test" href="#">
  <div id="details">
    many scores ! : <br>
    test n°1 : 16/20<br>
    test n°2 : 11/20<br>
    test n°3 : 17/20<br>
    test n°4 : 14/20<br>
    test n°5 : 15/20<br>
  </div>
</a>

But as you can see in this fiddle we can click on the lightbox in order to make it disapear ... : http://jsfiddle.net/apr4Ln3j/

and without JS by the way ... Which sadly i'm not allowed to use --'

Upvotes: 0

Views: 81

Answers (1)

jsfrocha
jsfrocha

Reputation: 1860

On the example you provided clicking both the background or the image box when opened closes it.

However, you could try messing around with the pointer-events property

JSFiddle

I've modified your Fiddle to make the box clickable, and the background not clickable using this property. I know you want the opposite, but maybe now you can get there yourself - I'm just guiding to a possible path.

Upvotes: 1

Related Questions