JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.indexOf()でURLを部分一致で検索して一致する場合にモーダルを表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.indexOf()

JavaScriptの.indexOf()でURLを部分一致で検索して一致する場合にモーダルを表示

JavaScriptの.indexOf()でURLを部分一致で検索して一致する場合にモーダルを表示

今回は、JavaScriptの .indexOf() の検索を使ってモーダルを表示させてみます。

比較的カスタマイズしやすく、応用させやすいメソッドなので是非最後までご覧いただけると嬉しいです。

.indexOf()

JavaScriptの .indexOf() は、文字列または配列に特定の値が含まれるか検索するメソッドです。

var url = location.href;
var indextext = url.indexOf(’検索する文字列’);
  console.log(indextext); 

指定された値が最初に現れたインデックス番号を返します。検索をした時にもし対象の文字列が含まれなかった場合は、返り値として数値の-1が返されます。

インデックス番号とは?

インデックス番号とは、配列の0から始まる要素の番号のことです。 例えば、配列の1つ目の要素のインデックスは0で、2つ目は1、3つ目は2という具合に増えていきます。 

部分一致の条件分岐

この記事では「部分一致」の条件分岐を使用しています。

indexOf()でマッチしなかったとき-1を返し、マッチしたときには0以上の整数を返す。この仕組みを利用することで部分一致の判定を実現できます。

var url  = 'javascript';
var searchword = 'script';

if (url.indexOf(searchword) > -1) {
 // 条件分岐で部分一致した時の処理
}

この条件分岐の方法は、以下の記事を参考にさせていただきました。

かかかず
かかかず

完全一致と前方・後方一致の条件分岐の方法がまとまった記事なので、チェックしてみてください。

URLを部分一致でモーダルを出すサンプル

早速サンプルです。

この記事では、URLに「javascript」が含まれる場合にモーダルが出る設定です。

この記事のURLは「https://dubdesign.net/javascript/indexof-ifelse/」で「javascript」が含まれるので、以下のようにモーダルが表示されます。

かかかず
かかかず

もう一回モーダルの表示を見る場合は、上記の「ページ更新」ボタンをクリックしてください。

実装の手順と方法

手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。

モーダルのHTMLを記述

まずはじめに、HTMLを記述します。HTMLはモーダルを表示するコードです。

<div class="popup" id="firstTimeModal">
  <div class="popup-inner">
    <div class="modalCloseButton" id="modalCloseCloss"><span class="lineClose"></span></div>
    <img src="https://dubdesign.net/wp-content/uploads/2022/02/java_modaltoc-1024x587.jpg" alt="ポップアップ画像">
    <div class="modalBottom"><p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市。</p></div>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>
JavaScriptを記述

次にJavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

window.addEventListener("DOMContentLoaded", () => {

// 現在のURLを取得して整形
var href = location.href;
var ary = href.split('/');
var str = ary[ary.length - 1];
var url = href.replace(str, '');
// URLを部分一致で検索する文字列
var searchword = 'javascript';
  console.log(url);
  console.log(searchword);
var indextext = url.indexOf(searchword);
  console.log(indextext);

  // 部分一致で条件分岐
  if (url.indexOf(searchword) > -1) {
    // 「javascript」の文字がURLに含まれる場合の処理

  // モーダル 
  var popup = document.getElementById('firstTimeModal');
  if(!popup) return;
  popup.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }
}
 
});
CSSを記述

最後に、CSSを記述して見た目を整えます。

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  background-color: #fff;
  z-index: 2;
  border-radius: 3px;
}
.popup-inner img {
  width: 100%;
  border-radius: 3px 3px 0 0;
}
div#modalCloseCloss:hover {
    opacity: 0.7;
}
.modalCloseButton {
    position: absolute;
    left: 92%;
    top: -48px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    width: 2rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBottom {
    padding: 22px 30px;
}
.modalBottom p {
    margin: 0;
}
かかかず
かかかず

これで完成です。

ざっくりとしたコードの解説

コードは、モーダルのHTML・条件分岐のJavaScript・モーダルの見た目を整えるCSSの3種類です。これらのコードについて、順に解説していきます。

HTML

HTMLは、モーダルに関しての記述で「firstTimeModal」のidを持つ要素の中に、モーダルを閉じるボタンや、モーダルで表示する中身を記述します。

<div class="popup" id="firstTimeModal">
  <div class="popup-inner">
    <div class="modalCloseButton" id="modalCloseCloss"><span class="lineClose"></span></div>
    <img src="https://dubdesign.net/wp-content/uploads/2022/02/java_modaltoc-1024x587.jpg" alt="ポップアップ画像">
    <div class="modalBottom"><p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市。</p></div>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>

idが「modalCloseCloss」の div タグが、表示されたモーダルを閉じる要素。idが「js-black-bg」の div タグがモーダルの背景の要素で、この2つのどちらかがクリックされることでモーダルが非表示になります。

JavaScript

JavaScriptは、HTML 文書の読み込みと解析が完了したときに発生する.addEventListenerDOMContentLoaded で、処理内容を記述しています。

window.addEventListener("DOMContentLoaded", () => {

// 現在のURLを取得して整形
var href = location.href;
var ary = href.split('/');
var str = ary[ary.length - 1];
var url = href.replace(str, '');
// URLを部分一致で検索する文字列
var searchword = 'javascript';
  console.log(url);
  console.log(searchword);
var indextext = url.indexOf(searchword);
  console.log(indextext);

  // 部分一致で条件分岐
  if (url.indexOf(searchword) > -1) {
    // 「javascript」の文字がURLに含まれる場合の処理

  // モーダル 
  var popup = document.getElementById('firstTimeModal');
  if(!popup) return;
  popup.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }
}
 
});

詳細の処理内容はコメントアウトにそれぞれ記載していますが、冒頭でページのURLを取得して整形。そして、指定した文字列との部分一致の検索で処理内容を記述してモーダルを表示します。

CSS

CSSは、モーダルに関する記述のみです。「.is-show」のclassが付くものはJavaScriptでモーダルの表示になった時の記述です。

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  background-color: #fff;
  z-index: 2;
  border-radius: 3px;
}
.popup-inner img {
  width: 100%;
  border-radius: 3px 3px 0 0;
}
div#modalCloseCloss:hover {
    opacity: 0.7;
}
.modalCloseButton {
    position: absolute;
    left: 92%;
    top: -48px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    width: 2rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBottom {
    padding: 22px 30px;
}
.modalBottom p {
    margin: 0;
}

さいごに

いかがでしたでしょうか?

例えば「指定ディレクトリ・カテゴリのみでモーダルを表示」や「指定パラメータ入りのURLの場合何かを表示」のように、カスタマイズすればいろんな処理ができるので、活用してみてください。