外部HTMLをポップアップする

外部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]);
}

デモページ