我希望将图像放在模式框中。 我可以加载带有图像的模态框,但每次我按下下一张图像时,模态框都会消失。我对此束手无策。
我不想使用任何形式的 JavaScript。我想坚持纯 HTML 和 CSS。
我做错了什么
我的代码在这里 http://codepen.io/kinivrus/pen/XmJvRJ?editors=110
问候 大卫
<a href="#portfolio"><img src="portfolio.gif" width="591" height="591" alt="Portfolio" /></a>
<div id="portfolio" class="portfolioModal">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Portfolio</h2>
<div class="slider">
<ul class="frames">
<li id="one" class="slide">
<img src="8k3N3EL (1).jpg" width="640" height="320" alt="slide 1" />
<nav>
<a class="prev" href="#five">←</a>
<a class="next" href="#two">→</a>
</nav>
</li>
<li id="two" class="slide">
<img src="blue-bar-1255161.jpg" width="640" height="320" alt="slide 2" />
<nav>
<a class="prev" href="#one">←</a>
<a class="next" href="#three">→</a>
</nav>
</li>
<li id="three" class="slide">
<img src="download (1).jpg" width="640" height="320" alt="" />
<nav>
<a class="prev" href="#two">←</a>
<a class="next" href="#four">→</a>
</nav>
</li>
<li id="four" class="slide">
<img src="download.jpg" width="640" height="320" alt="" />
<nav>
<a class="prev" href="#three">←</a>
<a class="next" href="#five">→</a>
</nav>
</li>
<li id="five" class="slide">
<img src="startup-594091.jpg" width="640" height="320" alt="" />
<nav>
<a class="prev" href="#four">←</a>
<a class="next" href="#one">→</a>
</nav>
</li>
</ul>
</div>
最佳答案
仅使用 CSS 进行这些更改的一种方法是使用单选按钮和 :checked
伪选择器。这不会隐藏您的模式。
这是一支展示它方法的笔:http://codepen.io/_Billy_Brown/pen/VjxZzx?editors=1100
此方法不允许使用箭头按钮进行循环,但可以使用单选按钮列表。使用 ~
,您可以选择一个兄弟元素,但这只会在文档中起作用,而不是在文档中向上起作用。
以下内容:
.images {
margin-top: 1em;
position: relative;
width: 256px;
height: 256px;
}
[class*="slide-"] {
opacity: 0.0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: opacity linear 0.5s;
}
.to-one:checked ~ .images .slide-one,
.to-two:checked ~ .images .slide-two,
.to-three:checked ~ .images .slide-three {
opacity: 1.0;
}
依赖于类似这样的结构:
<div class="modal">
<input type="radio" name="image-slider" class="to-one" checked>
<input type="radio" name="image-slider" class="to-two">
<input type="radio" name="image-slider" class="to-three">
<div class="images">
<img src="image-1.png" class="slide-one">
<img src="image-2.png" class="slide-two">
<img src="image-3.png" class="slide-three">
</div>
</div>
我使用 opacity
使图像淡入淡出,但您可以使用 display: none;
让不可见的真正消失,或者更好的是,使用 FlexBox 的order
属性在单击单选按钮时重新排列它们。
关于javascript - 模态框内的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32425195/