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

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

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

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

デモページ

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

HTML

CSS

javascript(jQuery)

171105_0.htnl

外部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します。

デモページ

  • コーダーのための計算機