Popup window does not appear due to problems with CSS - html

Question

I'm trying to reproduce the popup in this page. However, when I add this code to my page nothing shows up. If I start looking at the CSS file within Adobe Dreamweaver, there are many errors in the CSS file. I suspect that's the reason the popup is not showing when I load the page. Attached is an image with some of the issues. In line 860 it's expecting an RBRACE. At line 869 the error is "unexpected token &". At line 873 it's unexpected token }. The same errors appear later on. When I analysed the code in codepen.io there were no issues, so I don't understand where the problem is.
This is the code I have so far:
In the html file:
<div id="popup1" class="overlay">
<div class="popup">
<h2>Info box</h2>
<a class="close" href="#">×</a>
<div class="content">
<p>This is done totally without JavaScript. Just HTML and CSS.</p>
</div>
</div>
</div>
then later in the same html file:
<script>
$(window).load(function () {
$('.overlay').show();
$('.popup').show();
});
</script>
In the CSS file:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
&.light {
background: rgba(255,255,255,0.5);
}
.cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
}
&:target {
visibility: visible;
opacity: 1;
}
}
.popup {
margin: 75px auto;
padding: 20px;
background: #fff;
border: 1px solid #666;
width: 300px;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
position: relative;
.light & {
border-color: #aaa;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
h2 {
margin-top: 0;
color: #666;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #666;
&:hover {
opacity: 1;
}
}
.content {
max-height: 400px;
overflow: auto;
}
p {
margin: 0 0 1em;
&:last-child {
margin: 0;
}
}
}

Answer 1

Try changing the visibility:hidden to display:none and also why don't you just hide everything in the .overlay class and use the show() method to display the content in the javascript

Answer 2

Firstly, The codepen is using SCSS which is transformed to CSS and then it works. So, if you directly use that as CSS, it won't work and give errors. You need some pre-processor to process the SCSS to CSS and then use it.
e.g.
This is SCSS syntax (in codepen)
overlay {
background: red;
opacity: 0;
&:target {
opacity: 1;
}
}
which gets converted to the following CSS (and is actually getting used)
overlay {
background: red;
opacity: 0;
}
overlay:target {
opacity: 1;
}
So, you cannot use the former directly in your html without processing.
Secondly, the way codepen is working is by using a href's internal linking attribute. You create an internal link by href and then when the user clicks on the link, target attribute is added to the overlay class overriding the previously written CSS.
Have tried to partially fix it for you:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
/* Have fixed the CSS till here and so basic example is working fine now */
.popup {
margin: 75px auto;
padding: 20px;
background: #fff;
border: 1px solid #666;
width: 300px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
position: relative;
.light & {
border-color: #aaa;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
h2 {
margin-top: 0;
color: #666;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #666;
&:hover {
opacity: 1;
}
}
.content {
max-height: 400px;
overflow: auto;
}
p {
margin: 0 0 1em;
&:last-child {
margin: 0;
}
}
}
Click Me
<div id="popup1" class="overlay">
<div class="popup">
<h2>Info box</h2>
<a class="close" href="#">×</a>
<div class="content">
<p>This is done totally without JavaScript. Just HTML and CSS.</p>
</div>
</div>
</div>
You can also achieve the same using javascript but that need code other than what you have written.
Hope it helps. Revert for any doubts!