[パーツ]モーダルウィンドウ モーダルウィンドウの中身がスライド

CSS HTML
Update 2018.02.09

モーダルウィンドウの中身がスライド

ボタンを押すと中心からモーダルウィンドウが現れるタイプです。
さらに現れたウィンドウはスライドでページングされています。

browser:  65 11 20 11 
ニャン易度 
<div class="cp_modal05">
	<label for="cp_controller" class="cp_btn">open modal</label>
	<div class="cp_modal">
		<input type="checkbox" id="cp_controller" class="cp_open" hidden>
		<div class="cp_modal_wrap">
			<label for="cp_controller" class="cp_overlay"></label>
			<div class="cp_modal_cont">
				<label for="cp_controller" class="cp_close"></label>
				<input type="radio" name="nav" id="cp_slide-1" class="cp_radio" checked hidden/>
				<input type="radio" name="nav" id="cp_slide-2" class="cp_radio" hidden/>
				<input type="radio" name="nav" id="cp_slide-3" class="cp_radio" hidden/>
				<div class="cp_modal_slide content-1">
					<div class="cp_modal_item">
						<h2>テキスト - Slide 1</h2>
						<p>テキスト</p>
						<div class="cp_nav">
							<label for="cp_slide-2" class="cp_next"></label>
						</div>
					</div>
				</div>
				<div class="cp_modal_slide content-2">
					<div class="cp_modal_item">
						<h2>テキスト - Slide 2</h2>
						<p>テキスト</p>
						<div class="cp_nav">
							<label for="cp_slide-1" class="cp_prev"></label>
							<label for="cp_slide-3" class="cp_next"></label>
						</div>
					</div>
				</div>
				<div class="cp_modal_slide content-3">
					<div class="cp_modal_item">
						<h2>テキスト - Slide 3</h2>
						<p>テキスト</p>
						<p class="citation">テキスト</p>
						<div class="cp_nav">
							<label for="cp_slide-2" class="cp_prev"></label>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
.cp_modal05 {
	font-size: 1rem;
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	display: flex;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #333333;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
}
.cp_modal05 #cp_controller {
	position: absolute;
	left: -999em;
	opacity: 0;
}
.cp_modal05 .cp_open:checked ~ .cp_modal_wrap {
	display: block;
}
.cp_modal05 .cp_open:checked ~ .cp_modal_wrap:before,
.cp_modal05 .cp_open:checked ~ .cp_modal_wrap .cp_overlay {
	display: block;
}
.cp_modal05 .cp_close {
	font-size: 1.5em;
	position: absolute;
	z-index: 100;
	top: 0;
	right: 0.5em;
	cursor: pointer;
}
.cp_modal05 .cp_close::before {
	font-family: 'FontAwesome';
	content: '\f00d';
}
.cp_modal05 .cp_close:hover::before {
	color: #00bcd4;
}
.cp_modal05 .cp_modal_wrap {
	display: none;
}
.cp_modal05 .cp_modal_wrap:before {
	position: fixed;
	z-index: 101;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	content: '';
	background: rgba(27,37,56,0.8);
}
.cp_modal05 .cp_overlay {
	position: fixed;
	z-index: 102;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
}
.cp_modal05 .cp_modal_cont {
	position: absolute;
	z-index: 103;
	top: 50%;
	left: 50%;
	overflow: hidden;
	width: 80%;
	max-width: 90%;
	max-height: 90%;
	padding: 15px 0;
	transform: translate(-50%, -50%);
	text-align: center;
	border-radius: 0.25em;
	background: #ffffff;
}
.cp_modal05 .cp_modal_cont p {
	margin: 0;
	line-height: 1.8;
	text-indent: 1em;
	text-align: left;
	padding: 0 2.5em;
}
.cp_modal05 .cp_modal_cont p.citation {
	text-align: right;
}
.cp_modal05 .cp_modal_cont p.citation::before {
	content: '\2500'
}
.cp_modal05 .cp_modal_cont p:not(.citation) {
	margin-bottom: 1.5rem;
}
.cp_modal05 .cp_modal_item {
	position: relative;
	margin: 0 1em;
	padding: 3em 0 1em 0;
}
.cp_modal05 .cp_modal_slide {
	position: absolute;
	display: flex;
	width: 100%;
	transition: all 0.4s ease-in;
}
.cp_modal05 .cp_slide-2 {
	left: 100%;
}
.cp_modal05 .cp_slide-3 {
	left: 200%;
}
.cp_modal05 #cp_slide-1:checked ~ .content-1 {
	position: relative;
	left: 0;
	overflow: auto;
}
.cp_modal05 #cp_slide-1:checked ~ .content-2 {
	left: 100%;
}
.cp_modal05 #cp_slide-2:checked ~ .content-1 {
	left: -100%;
}
.cp_modal05 #cp_slide-2:checked ~ .content-2 {
	position: relative;
	left: 0;
	overflow: auto;
}
.cp_modal05 #cp_slide-2:checked ~ .content-3 {
	left: 100%;
}
.cp_modal05 #cp_slide-3:checked ~ .content-1 {
	left: -200%;
}
.cp_modal05 #cp_slide-3:checked ~ .content-2 {
	left: -100%;
}
.cp_modal05 #cp_slide-3:checked ~ .content-3 {
	position: relative;
	left: 0;
	overflow: auto;
}
.cp_modal05 .cp_nav {
	position: absolute;
	top: 50%;
	width: 100%;
}
.cp_modal05 .cp_nav label {
	line-height: 0.5em;
	position: absolute;
	display: inline-block;
	width: 10px;
	height: 10px;
	padding: 0.5em;
	cursor: pointer;
	color: #ffffff;
	border-radius: 0.3em;
	background: #00bcd4;
}
.cp_modal05 .cp_nav label.cp_prev {
	left: 0;
}
.cp_modal05 .cp_nav label.cp_prev::before {
	font-family: 'FontAwesome';
	content: '\f100';
}
.cp_modal05 .cp_nav label.cp_next {
	right: 0;
}
.cp_modal05 .cp_nav label.cp_next::before {
	font-family: 'FontAwesome';
	content: '\f101';
}
.cp_modal05 .cp_btn {
	position: relative;
	display: inline-block;
	min-width: 60px;
	padding: 8px 15px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	border: #da3c41 solid 1px;
	border-radius: 3px;
	background: #ffffff;
}
@media only screen and (max-width: 767px) {
	.cp_modal05 .cp_modal_cont {
		width: 100%;
		max-width: 100%;
		border-radius: 0;
	}
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?