我正在尝试复制this page中的弹出窗口。但是,当我将此代码添加到我的页面时,没有任何显示。如果我开始查看Adobe Dreamweaver中的CSS文件,则CSS文件中有很多错误。我怀疑这是加载页面时弹出窗口未显示的原因。随附带有某些问题的图像。在860行中,期望有一个RBRACE。在第869行,错误为“意外令牌&”。在873行,它是意外令牌}。稍后会出现相同的错误。当我分析codepen.io中的代码时,没有问题,所以我不明白问题出在哪里。
这是我到目前为止的代码:
在html文件中:
<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>
然后再在同一个html文件中:
<script>
$(window).load(function () {
$('.overlay').show();
$('.popup').show();
});
</script>
在CSS文件中:
.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;
}
}
}
[尝试更改可见性:隐藏为显示:无,以及为什么不将所有内容都隐藏在.overlay类中,并使用show()方法在javascript中显示内容