Can't get popup modal to work

Hi, I want to add a pure css popup modal to my page. I found a demo that I like and Im trying to replicate the tutorial. I have copied the html and css directly form the tutorial but its not working, The window won’t popup. I feel like an idiot that I can’t get a tutorial that gives me all of the code to work haha


<a href="#text">See Examples</a>
<div id="text" class="lightbox2">
<div class="box"><a class="close" href="#">X</a>
<p class="title">Test Popup</p>
<div class="content2">
Lets see if this is faster.


.lightbox2 .box {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    margin: 2% auto;
    box-shadow: 0px 1px 26px -3px #777777;
    .lightbox2 .title {
        padding:0 0 10px 0px;
        border-bottom:1px #ccc solid;
    .lightbox2 .content {
        padding:10px 0 0 0px;
    .lightbox2 .close {
        font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
.lightbox2 {
    /** Hide the lightbox */
    display: none;
    /** Apply basic lightbox styling */
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
.lightbox2:target {
    /** Show lightbox when it is target */
    display: block;
    outline: none;

My Page.

Seems to work here:-

I just noticed I already had a .lightbox class and a .content class so I went back through and changed it to .lightbox2 and .content2. It still doesn’t work. Im not sure what is interfering on my site.

You did change it in both the html and the css?

Yep, changed in both.

No one can say without seeing it in context with the whole page and css.

Oops, I thought I linked it. My Page.

Have not worked it out yet, but have a clue.
The css appears to be working, if you manually type in the popup appears, so that works.
But the problem seems to be that when you click the <a> the url does not change to #text, but I don’t know why. :confused:
It does show the correct url on hover.

I noticed that too. Ill keep investigating.

I just tried with javascript disabled in the DevTools, and the popup does show up after clicking on it. Do you have an EventListener on links that prevents them from firing? By quickly looking at your other pages, you seem to have something that listens to anchors, there’s something going wrong there I guess.


Im not sure actually, let me look through my JS.

Devtools show a click event handler on that anchor but you’ve too many script for me to look through to find the culprit:)

Ill go through each!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.