模态框内的图像

我正在将图像放入模态框中。我可以加载模式框中的图像，但每当我按下一个图像，模态框消失。我以我的智慧结束了这一点。模态框内的图像

我不想使用任何形式的JavaScript。我想坚持纯HTML和CSS。

我在做什么错

我的代码是在这里 http://codepen.io/kinivrus/pen/XmJvRJ?editors=110

问候大卫

做这些变化仅适用于CSS

<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>

来源

2015-09-06 David Lewis

我不擅长纯粹的CSS，但在你的情况，并根据我的知识，URL＃符号作为一个哈希标记而不是一个ID选择器。所以一旦点击页面尝试加载和位置的名称标记和模态效果消失。我一直在使用模式的js和css的组合。 –

如果你可以放弃onClick导航并选择自动播放，那么这可能会给你一些想法 http://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/ –

一种方法是使用单选按钮，用: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属性来重新排列单击单选按钮时的属性。

来源

2016-07-23 10:46:25

模态框内的图像

回答

相关问题