・１ページに**複数ある**ポップアップウィンドウを作りたい。

Question

前提・実現したいこと

・１ページに複数あるポップアップウィンドウを作りたい。
↓
・画像をクリックすると、ポップアップウィンドウが現れて画像を大きく表示できるようにしたい。

jQueryでポップアップウィンドウの実装を試みていますが、できません。
（複数の画像があり、それぞれの順番をjQueryで取得して、同じ順番のポップアップウィンドウを表示したい。）

詳細

class="works-image-box"がついている要素にid="openModal"をつけた。

id="openModal"の要素をクリックすると、 var openModal = $(this).index();で
何番目の#openModalかを取得して、$('.modalArea').eq(openModal).fadeIn();で
同じ順番の.modalAreaがフェイドインするつもりがどうも動かない。

発生している問題・エラーメッセージ

ひとつだけの表示はできたが、他のモーダルウィンドウが出てこない

該当のソースコード

<!-- クリックしたい画像要素（id="openModalがついているところをクリックしたい）ここから -->

        <section id="works">
           
            <h2 class="section-title">Works</h2>
            <div class="works-flex">
                <div class="works-item">
                    <div class="works-image-box" id="openModal"><img src="images/.png" alt=""></div>
                    <p class="works-title">（クラウドソーシング案件）</p>
                    <p class="works-cat">Design / Coding</p>
                </div>
                <div class="works-item">
                    <div class="works-image-box" id="openModal"><img src="images/.jpg" alt=""></div>
                    <p class="works-title">（架空サイト）</p>
                    <p class="works-cat">Design</p>
                </div>
                <div class="works-item">
                    <div class="works-image-box" id="openModal"><img src="images/.jpg" alt=""></div>
                    <p class="works-title">（架空サイト）</p>
                    <p class="works-cat">Design</p>
                </div>
            </div>
        </section>

　　　　　<!-- クリックしたい画像要素ここまで -->




　　　　　<!-- モーダルエリアここから -->


        <section id="modalArea" class="modalArea">
            <div id="modalBg" class="modalBg"></div>
            <div class="modalWrapper">
                <div class="modalContents">
                    <img src="images/.jpg" alt="のアップ画像">
                </div>
                <div id="closeModal" class="closeModal">
                    ×
                </div>
            </div>
        </section>
        <section id="modalArea" class="modalArea">
            <div id="modalBg" class="modalBg"></div>
            <div class="modalWrapper">
                <div class="modalContents">
                    <img src="images/.jpg" alt="のアップ画像">
                </div>
                <div id="closeModal" class="closeModal">
                    ×
                </div>
            </div>
        </section>

　　　　　<!-- モーダルエリアここまで -->

　　　　　

/* ポップアップCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 20; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 1000px;
  padding: 10px 30px;
  background-color: #fff;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}

// worksのポップアップウィンドウ

$(function () {
  $('#openModal').click(function(){
    var openModal = $(this).index();
      //何番目の#openModalかを取得
    $('.modalArea').eq(openModal).fadeIn();
    $('html, body').css('overflow', 'hidden');
  });

  $('#closeModal , #modalBg').click(function(){
    $('.modalArea').fadeOut();
    $('html, body').removeAttr('style');
  });
});

試したこと

一つ目の画像をクリックすると一つ目のモーダルウィンドウは出るのですが、
二つ目の画像をクリックしても反応ないし。（二つ目のポップアップウィンドウが出て欲しい）

散々悩んであれこれしてみたが、どうもうまくいきません。
詳しい方、ご回答のほどよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

エディタ

vs code

Comments

[YT0014]

モーダルウィンドウの意味を、再度、ご確認ください。
https://sem-journal.com/design/modal/
その上で、ご自身のやりたいことを再検討して、質問を修正されることをお勧めします。
また、コード(HTML,CSS)は、マークダウンにてご提示ください。

[keisukekusaka]

ご指摘ありがとうございました。修正いたしました。

Answer 1

ブラウザのモーダル機能はおおむね廃止になっていますので
疑似モーダルをつくりたいということでしょうか？
jQueryを利用するならjQuery-uiのdialogを利用してみてください

• codepen - double modal

Comments

[keisukekusaka]

ご回答ありがとうございます。
正確には、ポップアップウィンドウでした。
質問を修正しました。

[yambejp]

サンプルつけました。
モーダルからモーダルを開きたいということではない？

[keisukekusaka]

ご回答ありがとうございます。
サンプル拝見しました。
モーダルからモーダルを開きたいのでは、ないです。

例えば、画像が１０枚並んでいて、それぞれクリックできるとします。
HTMLで画像要素を１０個、別にモーダルウィンドウ要素を１０個書きます。
画像要素にidをつけ、そのidがクリックされると処理するj Queryを書きます。

画像（id）の順番（番号）を取得して、同じ順番のモーダルウィンドウを開きたいのです。

自分の書いたコードのどこが間違ってて動かないかを知りたいです。

説明が下手くそで申し訳ありません。

[yambejp]

画像をクリックすると専用のモーダルが開くのでしょうか？

<script>
$(function(){
$('.modal').hide();
$('[data-modal]').on('click',function(){
console.log(1);
$("#"+$(this).data('modal')).dialog({
modal:true,
buttons:{
"閉じる":function(){
$(this).dialog("close");
},
},
});
});
});
</script>

<div id="m1" class="modal">
モーダル1
</div>
<div id="m2" class="modal">
モーダル2
</div>
<div id="m3" class="modal">
モーダル3
</div>
<img alt="1" data-modal="m1">
<img alt="2" data-modal="m2">
<img alt="3" data-modal="m3">

[keisukekusaka]

画像をクリックすると専用のモーダルが開くのでしょうか？
↓
そうですね。専用のモーダルというか
例えば,画像が三つあって

画像
<img id='modalOpen'>
<img id='modalOpen'>
<img id='modalOpen'>

モーダル

<div id="modal-area">
<div id="modal-area">
<div id="modal-area">

画像がクリックされた際、jQueryでid='modalOpen'の順番を取得して同じ順番のモーダルをfade inさせたいのですが、可能なんでしょうか？

[yambejp]

おなじidの要素は設定できませんよ、IDで管理するなら一つだけ用意して
中身を変更する感じですかね

[keisukekusaka]

,,,解決致しました。。。
こんな初歩的なことが抜けておりました。

本当にありがとうございました。
次に進めます。
ベストアンサーに選ばせていただきます。