【HTML/jQuery】モーダルウィンドウをウィンドウ範囲外のクリックで閉じたい

Question

■困っていること
表題の通り、モーダルウィンドウをウィンドウ範囲外のクリックで閉じるようにしたいのですがやり方がわかりません。
モーダルウィンドウ内に配置した×ボタン押下で閉じるところまではできております。

やり方について検索すると、
モーダルオンオフのボタン(親要素)の中にモーダルウィンドウ(子要素)を含んでいるHTMLの構造を前提とした解決方法が多く、
今回のようにモーダルオンオフのボタンとモーダルウィンドウのHTMLが独立した状態(兄弟関係)での解決方法がわかりませんでした。

HTMLを変更せず、jQueryのみでウィンドウ範囲外のクリックでモーダルを閉じる方法がありましたらご教示いただきたいです。

■ソースコード

<a id="button">モーダルオンオフ</a>
<div id="modal-window">
  <button id="close-icon">&times;</button>
</div>

// モーダルオンオフのボタンが押されたら
$('#button').on('click', function () {
  // モーダルウィンドウを開く
  $('#modal-window').toggleClass("visible");

  // ×ボタンが押されたらモーダルウィンドウを閉じる
  $('#close-icon').off('click').on('click', function () {
    $('#modal-window').removeClass('visible');
  });
});

■想定するイメージ

Comments

[退会済みユーザー]

質問者さんの言う「モーダルウィンドウ」の定義は何ですか？　「ウィンドウ範囲外のクリックで閉じたい」ということからは一般的なモーダルの意味とは違うように思えるのですが。

[Jake5]

ご指摘ありがとうございます。想定しているモーダルウィンドウのイメージを添付いたしました。
意図が伝わりますと幸いです。

Answer 1

私が知っている作成方法は2種類になります
1つ目はbootstrap modal#live-demo
Launch demo modalボタンをクリックしてデベロッパーツールを見るとわかりますが、

<!-- classはオリジナルです -->
<div class="full-back-window"><!-- 薄暗い背景 -->
  <div class="modal-body"><!-- 白いモーダル本体 -->
    <!-- モーダルの中身 -->
  </div>
</div>

の様な構成になっているのがわかると思います.
ただ、この場合
.full-back-windowをクリックした時に.hideをトグルさせると、
たとえ.modal-bodyをクリックしても反応してしまうかと思われます.
これの回避策は
.full-back-windowがクリックされて
.modal-bodyがクリックされていない状態の時というイベント処理が必要になります.

例として#modalがクリックされたターゲットが誰にあるのかはこのように確かめることができます

$("#modal").on("click",function(element){
  console.log(element);//クリックイベント
  console.log(element.target);//クリックされたターゲット
});

クリックされたターゲットに例えば
elementに.modal-bodyが含まれていなければ・・・や
elementに.full-back-windowが含まれていれば・・・
という感じの処理としては書くとが可能になります

他の回避策はあるのかもしれませんが、私がわからないです、すみません。

もう1つの方法はjBox.js
ここのMODAL WINDOWSのCLICK MEの1つ目のボタンを押してデベロッパーツールをみてください

<!-- idはjBoxのサイトと一致するはず -->
<div id="jBox12"></div><!-- 白いモーダル本体 -->
<div id="jBox12-overlay"></div><!-- 薄暗い背景 -->

という構成になっているのがわかると思います
この場合#jBox12の操作は自由にできますし,
#jBox12-overlayをクリックした時トグルさせることが可能になります
ただこの場合class管理.hideの方法です.
jBoxさんはどちらにもstyleを適用させている様ですが、いささか面倒なので,

<div class="modal">
  <!-- idはjBoxのサイトと一致するはず -->
  <div id="jBox12"></div><!-- 白いモーダル本体 -->
  <div id="jBox12-overlay"></div><!-- 薄暗い背景 -->
</div>

のように親要素を使用して背景をクリックさせたら親要素のmodalをhideさせるなどというようにしていくとうまくいきやすいかと思われます.

私が.hideを使うので使用していますが、
.showなどでも構いません(考え方の問題).

Comments

[Jake5]

2つ目の方法で解決できました。ご回答いただき本当に感謝です！

[sk-sora--ypi]

コメントで失礼しますが、
bootstrapのlive-demoでデベロッパーツールを使用して以下のコードも試していただけると、1つ目も少々わかりやすいかと思います
（上に書いたjsはjqueryライクではなかったので）
$("#exampleModalLive").on("click",function(e){
console.log($(e.target));
console.log($(e.target).hasClass("modal"));
});