基于伪类:target锚点实现的弹出

在不使用ＪＳ的情况下；这种方式的弹出窗是非常值得推荐的；废话不多说；直接看代码：

ＨＴＭＬ

<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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</a>
		</div>
	</div>
	<!-- //popup -->

ＣＳＳ样式代码

.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;
}