HTMLをポップアップする

css JavaScript

HTMLをポップアップするjavascriptです。
jQueryを使用しています。jQueryバージョンは3.2.1です。

・HTML(同一ディレクトリ内)をポップアップ
・ポップアップした状態で次のリンクへ移行する
・ポップアップ部分以外をクリック(タップ)した場合、ポップアップを閉じる
・「閉じる」ボタンをクリック（タップ）でポップアップを閉じる
・一応レスポンシブ対応
・縦幅が一定超えた場合に一応スクロール可能（※未調整）

HTMLをlightboxみたいにポップアップできてページ送りがついてるプラグイン無いかなー？と探していたのですが無さそうなので作りました。
とても楽しかったです。

デモページ

.box_load内に入れ込む要素を回す処理以外はaddClass、removeClassつけてるので大したことやっていません。
ほとんどの動作は各要素に「active」というクラスをつけて、cssで動かしています。

HTML

<div class="container">
  <h1>htmlをポップアップする</h1>
  <ul class="link_list">
    <li>クリック0</li>
    <li>クリック1</li>
    <li>クリック2</li>
    <li>クリック3</li>
  </ul>
  <div class="box">
    <div class="box_inner">
      <!-- ↓ここに.load_xxが入る -->
      <ul class="box_load"> </ul> <!-- ↑ここに.load_xxが入る -->
      <div class="close"> 閉じる </div>
      <ul class="arrows">
        <li class="arrow_left"><span class="arrow_span">←</span></li>
        <li class="arrow_rigth"><span class="arrow_span">→</span></li>
      </ul>
    </div>
  </div>
  <div class="box_cover"> </div>
</div>
CSS
h1 {
	margin-bottom: 60px;
}

ul, li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.box_inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.arrows {
	display: table;
	width: 100%;
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	top: 50%;
}

.arrow_left {
	display: table-cell;
	width: 50%;
	padding-left: 5px;
	box-sizing: border-box;
}

.box_load_inner {
	display: block;
}

.arrow_rigth {
	display: table-cell;
	width: 50%;
	text-align: right;
	padding-right: 5px;
	box-sizing: border-box;
}

.arrow_span {
	font-weight: bold;
	cursor: pointer;
	-webkit-transition: .3s;
	transition: .3s;
}

.arrow_span:hover {
	color: #f00;
}

.close {
	position: absolute;
	right: 5px;
	top: 10px;
	cursor: pointer;
}

.box_cover {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: -1;
	opacity: 0;
	-webkit-transition: .3s;
	transition: .3s;
}

.box_cover.active {
	z-index: 10;
	opacity: 1;
}

.box {
	position: fixed;
	width: 90%;
	max-width: 600px;
	height: 90%;
	max-height: 700px;
	top: 50%;
	left: 50%;
	padding: 10px;
	box-sizing: border-box;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: .3s;
	transition: .3s;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.box.active {
	z-index: 15;
	opacity: 1;
	visibility: visible;
}

.box_load>li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.box_load_inner {
	padding: 10px 30px;
	box-sizing: border-box;
}

.load_0 {
	background: #c0f8c2;
}

.load_1 {
	background: #f8eac0;
}

.load_2 {
	background: #cdffe8;
}

.load_3 {
	background: #ffd2d4;
}

.box_load_cover {
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.link_list li {
	cursor: pointer;
	-webkit-transition: .3s;
	transition: .3s;
}

.link_list li:hover {
	background: #ddd;
	cursor: pointer;
}
javascript(jQuery)
$(function () {
	var box = $('.box'), link = $('.link_list li '), box_cover = $('.box_cover'), close = $('.close'), box_load = $('.box_load'), box_load_li = $('.box_load>li'), arrow_left = $('.arrow_left>.arrow_span'), arrow_rigth = $('.arrow_rigth>.arrow_span');
	// box_load内に要素を入れる 
	// ①新しい配列all_linkを作る 
	// ②link_listの中のliがいくつあるのか取ってきてforで回す
	// ③配列all_linkに171115_0.html、171115_1.html・・・のような感じで値を格納する 
	// ④box_loadの中にlink_listのliの数だけ'<li class="load_'+i+'"></li>を増やす 
	// ⑤<li class="load_'+i+'"></li>に配列all_link[i]をloadする 
	// ※load_0に対応するのはall_link[0](←配列の1番目。配列は0から始まります) 
	var all_link = new Array(), links = $('.link_list').find('li'); for (var i = 0; i < links.length; i++) { all_link[i] = '171115_' + i + '.html'; box_load.append('<li class="load_' + i + '"></li>'); $('.load_' + i).load(all_link[i]); }
	//一度box_load>liを非表示にする
	$('.box_load>li').hide();
	// linkをクリックしたとき 
	link.on('click', function () {
		//link.index(this)で、クリックされたliを指定する
		var li_index = link.index(this); $('.box_load>li').removeClass('active');
		$('.load_' + li_index).addClass('active'); $('.box_load>li').hide();
		$('.box_load >li.active').show();
		//もし.boxに「active」というクラスがあったら
		if (box.hasClass('active')) {
			box.removeClass('active');
			box_cover.removeClass('active');
			close.removeClass('active');
			$('.box_load>li').removeClass('active');
		} else {
			// もしないなら
			box.addClass('active');
			box_cover.addClass('active');
			close.addClass('active');
		}
	});
	//box_coverをクリックしたとき
	box_cover.on('click', function () {
		box.removeClass('active');
		box_cover.removeClass('active');
		close.removeClass('active');
		$('.box_load>li').removeClass('active');
	});
	//closeをクリックしたとき 
	close.on('click', function () {
		box.removeClass('active');
		box_cover.removeClass('active');
		close.removeClass('active');
		$('.box_load>li').removeClass('active');
	});
	// 矢印をクリックした時 
	// fade_speedは切り替わりの速さ
	var fade_speed = 300;
	arrow_rigth.on('click', function () {
		var load_active = $('.box_load >li.active'),
			// [right].box_load >li.activeの次のli、それがない場合は最初のliに戻る 
			right = load_active.next('li').length ? load_active.next('li') : $('.box_load >li:first');
		// .box_load >li.activeをfaceOutしてクラスを削除、 
		// [right]をfadeInしてクラスを付ける 
		$('.box_load >li.active').fadeOut(fade_speed).removeClass('active');
		right.fadeIn(fade_speed).addClass('active');
	});
	arrow_left.on('click', function () {
		var load_active = $('.box_load >li.active'),
			// [left].box_load >li.activeの前のli、それがない場合は最後のliに戻る 
			left = load_active.prev('li').length ? load_active.prev('li') : $('.box_load >li:last'); $('.box_load >li.active').fadeOut(fade_speed).removeClass('active');
		left.fadeIn(fade_speed).addClass('active');
	});
});
171105_0.htnl
<div class="box_load_cover">
  <div class="box_load_inner"> ここは171115_0.html </div>
</div>
htmlを配列にして回す
.box_loadの中に各htmlをloadします。
まず.link_listの数を取ってきてforで回します。
そして空の配列に171115_0.html、171115_1.html・・・のような感じに格納していきます。
htmlが0から始まるのが嫌なら、格納されるiの値に1を足してやれば1から始まります。
box_load.append(‘＜li class=”load_’+i+'”＞＜/li＞’)で、box_loadの中にiの数だけliを増やします。
その後$(‘.load_’+i).load(all_link[i]);で、対応するクラスに対応する配列のhtmlをloadします。例えば.load_0のクラスを持つものに配列all_link[0]に格納されているhtmlをloadします。
// box_load内に要素を入れる
// ①新しい配列all_linkを作る
// ②link_listの中のliがいくつあるのか取ってきてforで回す
// ③配列all_linkに171115_0.html、171115_1.html・・・のような感じで値を格納する
// ④box_loadの中にlink_listのliの数だけ'<li class="load_'+i+'"></li>を増やす
// ⑤<li class="load_'+i+'"></li>に配列all_link[i]をloadする
// ※load_0に対応するのはall_link[0](←配列の1番目。配列は0から始まります)
var all_link = new Array(),
	links = $('.link_list').find('li');
for (var i = 0; i < links.length; i++) {
	all_link[i] = '171115_' + i + '.html';
	box_load.append('<li class="load_' + i + '"></li>');
	$('.load_' + i).load(all_link[i]);
}

デモページ
      
Related article
   
  scrollIntoViewでスムーススクロール（ハッシュタグ付き） 
 スクロールしたらハッシュタグをつけます。location.hrefとかでできるかな？と思ったのです...
 JavaScript
 記事を読む
   
  デバイスごとにcss・jsを変える 
 import.jsを作り、その中にcssやjsをまとめて書く。
userAgentを使って振り分ける...
 css JavaScript
 記事を読む
   
  フル画面のスライドショー 
 ブラウザ画面いっぱいに広がるスライドショーです。結構楽しかった。
以前のエントリ「ブラウザ幅いっぱい...
 css JavaScript
 記事を読む
   
  【改良版】【jQuery不要】javascriptとcssで作るモーダル 
 【jQuery不要】javascriptとcssで作るモーダル
こちらの記事の改良版です。  動きは...
 css JavaScript
 記事を読む
   
  コーダーのための計算機を作りました 
 デザインをhtmlにするときに楽したいなという願望から生まれた計算機です。  ・とりあえず２で割...
 css HTML JavaScript
 記事を読む
    
 
 
  • コーダーのための計算機