モーダルウィンドウでコンテンツが手前にこない

前提

HTML, CSS, javascriptで、モーダルウィンドウを作っています。「クリックするとモーダルウィンドウを開きます」のテキストをクリックすると、以下の画像①(希望)のようにコンテンツが手前に出てきて欲しいのですが、現在、以下の画像②(現状)のようにコンテンツが前に出てきません。どう改善したらいいでしょうか？

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!--0721-->

<title>matsuda</title>
<style>
#matsuda{/*🌟*/
display:none;/*0721*/
width: 400px;
height:  400px;
box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.7);
z-index:2;/*0721*/
position:fixed;/*0721*/
}
#matsuda img{
width: 100%;
height: auto;
}
#upper_matsuda{
display: flex;
position: relative;/*0722*/
}
#matsuda_txt{
width: 50%;
}
#matsuda_txt p{
margin: 0;
margin-left: 10px;
}
#favorite{
position: relative;/*specify for #heart parent element*/
width: 48%;
box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.7);
}
#favorite_txt{
width: 50%;
height: 100%;
margin-left: 10px;
margin-top: -16px;/*これ！*/
}
#favorite_txt p{
text-align: center;
margin-bottom: -1em;
}
#heart{
  display: flex;
}
#heart label{
  position: absolute;
  width: 50px;
  height: 40px;
  /*keep #heart inside the #favorite*/
  right:  10%;
  bottom: 10%;
}
#heart label:before,
#heart label:after {
  position: absolute;
  content: "";
  left: 25px;
  top: 0;
  width: 25px;
  height: 40px;
  background: #f88dc8;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart label:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin :100% 100%;
}
#heart input:checked+label:before,
#heart input:checked+label:after {
  background: #b3b3b3;
}
#heart input{
  display: none;
}
.detail-button{
width: 60%;
margin: 0 auto;/*center the box*/
text-align: center;/*center the a elements*/
border: solid;
border-width: thin;
border-color: black;
margin-top: 40px;
}
.detail-button a{
text-decoration: none;
color: black;

}
.detail-button img{
width: 15px;
height: 15px;
margin-left: 10px;
}
#modal-overlay{/*0722*/
  z-index:1;
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:120%;
  background-color:rgba(0,0,0,0.75);
}
#modal-close{
  position: fixed;
  z-index: 9999;
}
</style>

</head>
<body>
    <div id="matsuda">
      <div><img src="assets/img/matsuda_cx5.png"></div>
      <div id="upper_matsuda">
        <div id="matsuda_txt">
          <p>マツダ</p>
          <p>CX-5 CD(4WD)</p>  
        </div>
        <div id="favorite">
          <div id="favorite_txt">
            <p>お気に入りに</p>
            <p>追加</p> 
          </div>
          <div id="heart">
            <input type="checkbox" checked id="1" name="heart"><label for="1"></label>
          </div>
        </div>
      </div> 
      <div class="detail-button">
          <a href="history.html"><span>詳細を見る</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a>
      </div>
      <!--<p><a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a></p>-->
      <!--<p><a id="modal-close" class="button-link">閉じる</a></p>0721-->
    </div>
    <p><a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a></p>
    <p><a id="modal-close" class="button-link">閉じる</a></p><!--0721-->

<script type="text/javascript">//🌟
'use strict';

  $("#modal-open").click(function(){
     //キーボード操作などにより、オーバーレイが多重起動するのを防止する
     $(this).blur() ;  //ボタンからフォーカスを外す
     if($("#modal-overlay")[0]) return false ;   //新しくモーダルウィンドウを起動しない [下とどちらか選択]
     //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;   //現在のモーダルウィンドウを削除して新しく起動する [上とどちらか選択]

     //オーバーレイ用のHTMLコードを、[body]内の最後に生成する
     $("body").append('<div id="modal-overlay"></div>');

     //[$modal-overlay]をフェードインさせる
     $("#modal-overlay").fadeIn("slow"); 

     //[$#matsuda]をフェードインさせる
     $("#matsuda").fadeIn("slow");

     //センタリングをする関数
     function centeringModalSyncer(){

       //画面(ウィンドウ)の幅を取得し、変数[w]に格納
       var w = $(window).width();

       //画面(ウィンドウ)の高さを取得し、変数[h]に格納
       var h = $(window).height();

       //コンテンツ(#modal-content)の幅を取得し、変数[cw]に格納
       var cw = $("#matsuda").outerWidth({margin:true});

       //コンテンツ(#modal-content)の高さを取得し、変数[ch]に格納
       var ch = $("#matsuda").outerHeight({margin:true});

       //コンテンツ(#modal-content)を真ん中に配置するのに、左端から何ピクセル離せばいいか？を計算して、変数[pxleft]に格納
       var pxleft = ((w - cw)/2);

       //コンテンツ(#modal-content)を真ん中に配置するのに、上部から何ピクセル離せばいいか？を計算して、変数[pxtop]に格納
       var pxtop = ((h - ch)/2);

       //[#modal-content]のCSSに[left]の値(pxleft)を設定
       $("#matsuda").css({"left": pxleft + "px"});

       //[#modal-content]のCSSに[top]の値(pxtop)を設定
       $("#matsuda").css({"top": pxtop + "px"});
       
       }
    }
);

$("#modal-overlay,#modal-close").unbind().click(function(){
    //[#modal-overlay]と[#modal-close]をフェードアウトする
    $("#modal-content,#modal-overlay").fadeOut("slow",function(){
    //フェードアウト後、[#modal-overlay]をHTML(DOM)上から削除
    $("#modal-overlay").remove();
  });
});





</script>
</body>

<script type="text/javascript">

</script>

</html>

試したこと

z-indexが問題だと思ったので、色々値を変えてみました。また、z-indexを指定するにはpositionが重要だとのことだったので、positionを追加しました。

画像

行動規範の内容に同意します

回答1件

ベストアンサー

dialogをつかってください

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#modal-open').addEventListener('click',()=>{
4    matsuda.showModal();
5  });
6  document.querySelector('#modal-close').addEventListener('click',()=>{
7    matsuda.close();
8  });
9});
10</script>
11<dialog id="matsuda">
12  <div><img src="assets/img/matsuda_cx5.png"></div>
13  <div id="upper_matsuda">
14    <div id="matsuda_txt">
15    <p>マツダ</p>
16    <p>CX-5 CD(4WD)</p>  
17    </div>
18    <div id="favorite">
19      <div id="favorite_txt">
20      <p>お気に入りに</p>
21      <p>追加</p> 
22    </div>
23    <div id="heart">
24      <input type="checkbox" checked id="1" name="heart"><label for="1"></label>
25    </div>
26  </div>
27  <div class="detail-button">
28    <a href="history.html"><span>詳細を見る</span></a>
29  </div>
30  <p><a id="modal-close" class="button-link">閉じる</a></p>
31</dialog> 
32
33<p><a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a></p>