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
HTML:
<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.
</div>
</div>
</div>
CSS:
.lightbox2 .box {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width:500px;
margin: 2% auto;
padding:20px;
background-color:#FFF;
box-shadow: 0px 1px 26px -3px #777777;
}
.lightbox2 .title {
margin:0;
padding:0 0 10px 0px;
border-bottom:1px #ccc solid;
font-size:22px;
}
.lightbox2 .content {
display:block;
padding:10px 0 0 0px;
font-size:18px;
line-height:22px;
}
.lightbox2 .close {
float:right;
display:block;
text-decoration:none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:22px;
color:#858585;
}
.lightbox2 {
/** Hide the lightbox */
display: none;
/** Apply basic lightbox styling */
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
color:#333333;
}
.lightbox2:target {
/** Show lightbox when it is target */
display: block;
outline: none;
}
My Page.
