我已经从https://html5up.net/strata下载了模板，但是在向poptrox-popup函数添加内容时遇到了问题。当用户在体内的6个图块之一上选择“查看”时，我想获取详细信息（展开的图像和文字）。我应该在哪里做... index.html，main.css，jquery.poptrox.min.js？加载程序图标似乎处于无限循环状态，目前不显示任何内容。
下面的脚本包含在index.html
中 <!-- Two -->
<section id="two">
<h2>Recent Projects</h2>
<div class="row">
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/01.jpg" class="image fit thumb"><img src={% static "mysite/images/thumbs/01.jpg"%} alt="" /></a>
<h3>Magna sed consequat tempus</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/02.jpg" class="image fit thumb"><img src={% static "mysite/images/thumbs/02.jpg"%} alt="" /></a>
<h3>Ultricies lacinia interdum</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/03.jpg" class="image fit thumb"><img src={% static "mysite/images/thumbs/03.jpg"%} alt="" /></a>
<h3>Tortor metus commodo</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/04.jpg" class="image fit thumb"><img src={% static "mysite/images/thumbs/04.jpg"%} alt="" /></a>
<h3>Quam neque phasellus</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/05.jpg" class="image fit thumb"><img src={% static "mysite/images/thumbs/05.jpg"%} alt="" /></a>
<h3>Nunc enim commodo aliquet</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/06.jpg" class="image fit thumb"><img src={% static "mysite/images/thumbs/06.jpg"%} alt="" /></a>
<h3>Risus ornare lacinia</h3>
<p>Lorem ipsum dolor sit amet nisl sed nullam feugiat.</p>
</article>
下面是main.css snipit
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.poptrox-popup {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
background: #fff;
border-radius: 0.35em;
box-shadow: 0 0.1em 0.15em 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
padding-bottom: 3em;
}
.poptrox-popup .loader {
text-decoration: none;
-moz-animation: spin 1s linear infinite;
-webkit-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
font-size: 1.5em;
height: 1em;
left: 50%;
line-height: 1em;
margin: -0.5em 0 0 -0.5em;
position: absolute;
top: 50%;
width: 1em;
}
.poptrox-popup .loader:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.poptrox-popup .loader:before {
content: '\f1ce';
}
.poptrox-popup .caption {
background: #fff;
bottom: 0;
cursor: default;
font-size: 0.9em;
height: 3em;
left: 0;
line-height: 2.8em;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
.poptrox-popup .nav-next,
.poptrox-popup .nav-previous {
text-decoration: none;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
background: rgba(0, 0, 0, 0.01);
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
width: 50%;
}
.poptrox-popup .nav-next:before,
.poptrox-popup .nav-previous:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.poptrox-popup .nav-next:before,
.poptrox-popup .nav-previous:before {
color: #fff;
font-size: 2.5em;
height: 1em;
line-height: 1em;
margin-top: -0.75em;
position: absolute;
text-align: center;
top: 50%;
width: 1.5em;
}
.poptrox-popup .nav-next {
right: 0;
}
.poptrox-popup .nav-next:before {
content: '\f105';
right: 0;
}
.poptrox-popup .nav-previous {
left: 0;
}
.poptrox-popup .nav-previous:before {
content: '\f104';
left: 0;
}
.poptrox-popup .closer {
text-decoration: none;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
color: #fff;
height: 4em;
line-height: 4em;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 4em;
z-index: 2;
}
.poptrox-popup .closer:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.poptrox-popup .closer:before {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
border-radius: 100%;
border: solid 3px rgba(255, 255, 255, 0.5);
content: '\f00d';
display: block;
font-size: 1em;
height: 1.75em;
left: 50%;
line-height: 1.75em;
margin: -0.875em 0 0 -0.875em;
position: absolute;
top: 50%;
width: 1.75em;
}
.poptrox-popup:hover .nav-next,
.poptrox-popup:hover .nav-previous {
opacity: 0.5;
}
.poptrox-popup:hover .nav-next:hover,
.poptrox-popup:hover .nav-previous:hover {
opacity: 1.0;
}
.poptrox-popup:hover .closer {
opacity: 0.5;
}
.poptrox-popup:hover .closer:hover {
opacity: 1.0;
}
我尝试在main.css的.poptrox-popup .caption中添加内容：“一些文本”，但没有成功。