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

模态框内的图像

1 个答案: