在不使用JS的情况下;这种方式的弹出窗是非常值得推荐的;废话不多说;直接看代码:
HTML
<div class="row slideanim">
<div class="col-md-6 gal-img">
<a href="#gal2" class="gal2h">
<span>标题文字</span>
</a>
<a href="#gal3" class="gal2h">
<span>文字</span>
</a>
</div>
<div class="col-md-6 gal-img">
<a href="#gal4" class="gal2h">
<span>标题文字Say Hello</span>
</a>
<a href="#gal5" class="gal2h">
<span>标题文字,我们路上见</span>
</a>
</div>
</div>
弹出容器代码
<!-- popup-->
<div id="gal1" class="popup-effect animate">
<div class="popup">
<p class="mt-4">哈罗,我们路上见</p>
<a class="close" href="#gallery">×</a>
</div>
</div>
<!-- //popup -->
<!-- popup-->
<div id="gal2" class="popup-effect animate">
<div class="popup">
<p class="mt-4">哈罗,我们路上见</p>
<a class="close" href="#gallery">×</a>
</div>
</div>
<!-- //popup -->
<!-- popup-->
<div id="gal3" class="popup-effect animate">
<div class="popup">
<p class="mt-4">哈罗,我们路上见</p>
<a class="close" href="#gallery">×</a>
</div>
</div>
<!-- //popup -->
<!-- popup-->
<div id="gal4" class="popup-effect animate">
<div class="popup">
<p class="mt-4">骑时等你Say Hello</p>
<a class="close" href="#gallery">×</a>
</div>
</div>
<!-- //popup -->
<!-- popup-->
<div id="gal5" class="popup-effect animate">
<div class="popup slideanim">
<p class="mt-4">哈罗,我们路上见</p>
<a class="close" href="#gallery">×</a>
</div>
</div>
<!-- //popup -->
CSS样式代码
.popup-effect {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 0ms;
visibility: hidden;
opacity: 0;
z-index: 99;
display:none;
}
.popup-effect:target {
visibility: visible;
display:block;
opacity: 1;
}
.popup {
background: #fff;
border-radius: 4px;
max-width: 500px;
position: relative;
margin: 6em auto;
padding: 3em 2em;
z-index: 999;
text-align: center;
}
.popup .close {
position: absolute;
top: 5px;
right: 15px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #000;
}
.popup .close:hover {
color: #0abde3;
}