javascript - 模态框内的图像

Question

我希望将图像放在模式框中。我可以加载带有图像的模态框，但每次我按下下一张图像时，模态框都会消失。我对此束手无策。

我不想使用任何形式的 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">&larr;</a>
        <a class="next" href="#two">&rarr;</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">&larr;</a>
        <a class="next" href="#three">&rarr;</a>
      </nav>
    </li>

    <li id="three" class="slide">
      <img src="download (1).jpg" width="640" height="320" alt="" />
      <nav>
        <a class="prev" href="#two">&larr;</a>
        <a class="next" href="#four">&rarr;</a>
      </nav>
    </li>
    <li id="four" class="slide">
      <img src="download.jpg" width="640" height="320" alt="" />
      <nav>
        <a class="prev" href="#three">&larr;</a>
        <a class="next" href="#five">&rarr;</a>
      </nav>
    </li>

    <li id="five" class="slide">
      <img src="startup-594091.jpg" width="640" height="320" alt="" />
      <nav>
        <a class="prev" href="#four">&larr;</a>
        <a class="next" href="#one">&rarr;</a>
      </nav>
    </li>
    </ul>

   </div>

Answer 1

仅使用 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 属性在单击单选按钮时重新排列它们。