パラメーターIDと一致するdata-target を探して表示させたい

Question

パラメーターIDと一致するdata-target を探して表示させたい

画像のように一覧から画像をクリックすると画像と説明文が出で来るモーダルウィンドウを作りました。
パラメーターを取得して一致する要素を（URLで外から飛んできても）開けるようにしたいのですが
パラメーターID【paramId】と一致するdata-targetを探してそれを表示できれば完成しますが取得が上手くできません
var data = document.querySelectorAll('[data-target="'+paramId+'"]')
この探し方を試しましたが違いました、、

参考サイトはここですhttps://www.tam-tam.co.jp/tipsnote/javascript/post9911.html

<ul class="itemList">	
	
	        <li>  <a href="#" class="js-modal-open" data-target="modal01"><img src="img/bag1.png"></a></li> 
			<li>  <a href="#" class="js-modal-open" data-target="modal02"><img src="img/bag1.png"></a>
			</li>
			<li>  <a href="#" class="js-modal-open" data-target="modal03"><img src="img/bag1.png"></a>
			</li>	
			
		</ul>

<div id="modal01" class="modal js-modal">
  <div class="modal-bg js-modal-close">
  </div>
    <div class="modal-content">
		<img src="img/bag1.png">
		  <div>
		  　　<h3>説明</h3>
		　　 <p>テキストテキスト</p>　
		　　　<a href="" class="modal-l">リンク</a>
		　　　<a href="#" class="js-modal-close bt"></a>
		 </div>
    </div>
</div>

<div id="modal02" class="modal js-modal">
  <div class="modal-bg js-modal-close">
  </div>
    <div class="modal-content">
     <img src="img/bag1.png">
		  <div>
		  　　<h3>説明</h3>
		　　 <p>テキストテキスト</p>　
		　　　<a href="" class="modal-l">リンク</a>
		　　　<a href="#" class="js-modal-close bt"></a>
		 </div>
    </div>
</div>

<script>
	
// URLのパラメータを取得
var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {
  // 「&」が含まれている場合は「&」で分割
  var param = urlParam.split('&');
 
  // パラメータを格納する用の配列を用意
  var paramArray = [];
  
  // 用意した配列にパラメータを格納
  for (i = 0; i < param.length; i++) {
    var paramItem = param[i].split('=');
    paramArray[paramItem[0]] = paramItem[1];
  }
	paramId = paramItem[1];
	console.log(paramId);
	
  // パラメータidを判断する
  if (paramId == 'modal01') {
　　
	    var target = $(paramId).data('target');
  var modal = document.getElementById(target);

    scrollPosition = $(window).scrollTop();
    $('body').addClass('fixed').css({'top': -scrollPosition});
    $('.js-modal').fadeIn();
	  
  } else {
	 　alert('違う'); 
	 
  }
}
	
	

	// モーダルウィンドウを閉じる
$('.js-modal-close').on('click', function(){
	$("header").fadeIn();
  $('body').removeClass('fixed');
  window.scrollTo( 0 , scrollPosition );
  $('.js-modal').fadeOut();
  return false;

	
});		



</script>	

元々のクリックしてモーダルウィンドウを開いていたコードはこちらです

//モーダルウィンドウを開く
	 $('.js-modal-open').on('click', function(){
	var target = $(this).data('target');
  var modal = document.getElementById(target);

    scrollPosition = $(window).scrollTop();
    $('body').addClass('fixed').css({'top': -scrollPosition});
    $('.js-modal').fadeIn();
    return false;
  });

css

/* モーダル全体(背景＋本体) */
.modal{
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
}

/* モーダル背景 */
.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: auto; /* はみ出た部分はスクロールさせる */
  height: 80%;/* これが無いと「overflow:scroll」が利かない */
  width: 60%;/* これが無いと「overflow:scroll」が利かない */
  background: white;
}

/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

追記

<ul class="itemList">	
	
	        <li><img  value="d1" data-target="#d1"src="img/bag1.png"></li> 
			<li><img value="d2" data-target="#d2" src="img/bag1.png">
			</li>
			<li><img value="d3" data-target="#d3"src="img/bag1.png">
			</li>	
			
		</ul>

<dialog id="d1">
	
	 <div class="modal-bg">
    <div class="modal-content">
		<img src="img/bag1.png">
		  <div>
		  　　<h3>11111説明</h3>
		　　 <p>テキストテキスト</p>　
		　　　<a href="" class="modal-l">リンク</a>
		　　　<input type="button" class="close bt">
		 </div>
		  </div>
    </div>
</dialog>
	
	
<dialog id="d2">
	<div class="modal-bg">
    <div class="modal-content">
     <img src="img/bag1.png">
		  <div>
		  　　<h3>222222説明</h3>
		　　 <p>テキストテキスト</p>　
		　　　<a href="" class="modal-l">リンク</a>
			  <input type="button"class="close bt">
		　　　
		 </div>
		 </div>
    </div>
	</dialog>
<dialog id="d3">
	<div class="modal-bg">
  </div>
    <div class="modal-content">
     <img src="img/bag1.png">
		  <div>
		  　　<h3>333333説明</h3>
		　　 <p>テキストテキスト</p>　
		　　　<a href="" class="modal-l">リンク</a>
		　　　<input type="button" class="close bt">
		 </div>
    </div>
</dialog>

追記css

dialog{
 background: #ffffff00;
  top: 0;
  height: 122vh;
  width: 100%;
  margin: 0 0;
  padding: 0 0;
  border: none;
  position: fixed;
	z-index: 100000;
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: auto; /* はみ出た部分はスクロールさせる */
  height: 80%;/* これが無いと「overflow:scroll」が利かない */
  width: 60%;/* これが無いと「overflow:scroll」が利かない */
  background: white;
	z-index: 100000;
}

/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
	background: #000000;
}
.modal-content img{
	width:100%;
}
input.bt{
 width: 36px;
 height: 36px;
 background: url(img/close.png) top right no-repeat;
 position:absolute;
 top:1%;
 right: 1%;
	border: none;
 
}
.modal-content div{
	padding: 20px;
}
a.modal-l{
	display:block; 
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
 
::-webkit-scrollbar-thumb {
  background: #8e8e8e;
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  background: #eeeeee;
  border-radius: 5px;
}


/* モーダル背景 */
.modal-bg{
   position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
	background: #000000d6;
	z-index: 1;
}

Comments

[yambejp]

モーダルウィンドウとはなにか定義してください
最近はchromeなどのdialogタグのこと指すことが多いですが・・・

[ayuayuayu]

ありがとうございます。わかりやすく画像を載せました。宜しくお願い致します。

[yambejp]

なんか勘違いされているような気もしますが、ソースを見る限りdivでつくった
疑似モーダル処理をしていますよね？それでhistory.pushStateを編集していますが
モーダルのパラメータではなく、ページ自体のパラメータなのは理解されていますか？
つまりwindow.openなどで開いたものならば独自のパラメータをつけられますが
ページ内の一部のHTML要素にパラメータを付けるというのは無理がある話に感じます

[ayuayuayu]

ありがとうございます、、、
私も説明が下手で、、、
ジャパスクリプトを書き換えてみました、、

[yambejp]

そういう話ではないのですが・・・
別ページを開くならパラメータをつけてウィンドウを開くことは可能です
しかしブラウザの特性上モードレス処理になります。
擬似的にモーダルでダイアログっぽいものを開くなら、それは
パラメータをつけるとかいうレベルの話ではないということです

[ayuayuayu]

別ページを開かないならパラメーターを付ける必要がないいということでしょうか？？
別ページから飛んで来た時にも、一致する画像のモーダルウィンドウを開いて表示させときたいので
パラメーターを付けることにしたのですが
パラメーターを付けなくても簡単に出来るということですか、、、？？
無知ですいません、、

Answer 1

ざっとこんな感じで

<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js"></script>
<script>
const openModal=id=>{
  document.querySelector(`dialog`+id)?.showModal();
}
window.addEventListener('DOMContentLoaded', ()=>{
  let selector,t;
  if(typeof HTMLDialogElement=="undefined"){
    document.querySelectorAll('dialog').forEach(x=>dialogPolyfill.registerDialog(x));
  }
  document.addEventListener('click',e=>{
    if(selector=e.target.closest('[data-target]')?.dataset.target){
      document.querySelector(selector).showModal();
    }
    if(t=e.target.closest('.close')){
      t.closest('dialog').close();
    }
  });
  if(selector=location.hash) openModal(selector);
});
window.addEventListener('hashchange',()=>{
  openModal(location.hash);
})
</script>
<input type="button" value="d1" data-target="#d1">
<input type="button" value="d2" data-target="#d2">
<input type="button" value="d3" data-target="#d3">
<dialog id="d1">1<input type="button" value="close" class="close"></dialog>
<dialog id="d2">2<input type="button" value="close" class="close"></dialog>
<dialog id="d3">3<input type="button" value="close" class="close"></dialog>
<a href="#d2">d2</a>

modal外をクリックして閉じる

<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js"></script>
<script>
const openModal=id=>{
  document.querySelector(`dialog`+id)?.showModal();
}
window.addEventListener('DOMContentLoaded', ()=>{
  let selector,t;
  if(typeof HTMLDialogElement=="undefined"){
    document.querySelectorAll('dialog').forEach(x=>dialogPolyfill.registerDialog(x));
  }
  document.addEventListener('click',e=>{
    if(t=document.querySelector('dialog[open]')){
      const r=e.target.getBoundingClientRect();
      const rx=r.x;
      const ry=r.y;
      const rw=r.width;
      const rh=r.height
      const px=e.pageX;
      const py=e.pageY;
      const ox=pageXOffset;
      const oy=pageYOffset;
      if(px<rx+ox || px>rx+ox+rw || py<ry+oy || py>ry+oy+rh){
        t.close();
      }else if(!e.target.closest('dialog')){
        t.close();
      }
    }
    if(selector=e.target.closest('[data-target]')?.dataset.target){
      document.querySelector(selector).showModal();
    }
    if(t=e.target.closest('.close')){
      t.closest('dialog').close();
    }
  });
  if(selector=location.hash) openModal(selector);
});
window.addEventListener('hashchange',()=>{
  openModal(location.hash);
})
</script>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

<input type="button" value="d1" data-target="#d1">
<input type="button" value="d2" data-target="#d2">
<input type="button" value="d3" data-target="#d3">
<dialog id="d1">1<input type="button" value="close" class="close"></dialog>
<dialog id="d2">2<input type="button" value="close" class="close"></dialog>
<dialog id="d3">3<input type="button" value="close" class="close"></dialog>
<a href="#d2">d2</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
     

Comments

[ayuayuayu]

ありがとうございます。追記で燃せたコードでcssで修正して形になりました！！
クラスmodal-bg　に　closeを追加して暗くなってる部分をクリックしても閉じるようにしたいのですが、その際modal-content　をクリックしても閉じてしまいます。
これはz-indexのもんだいではないですよね？ジャパスクリプトを使っているのでジャパスクリプトで書かないとダメなのでしょうか、、？

[yambejp]

提示のソースは未実装のブラウザに対してpolyfillでdialogタグの標準的なモーダル処理を
エミュレートしています。
chromeやedgeはネイティブにモーダル処理が可能でバックドロップ処理などもつけられますが
polyfillではそこまでサポートされていないようです。

何かをクリックしたらモーダルを閉じるというのは例示したclose処理を応用すれば
できると思います。モーダルの外側をクリックしたら閉じたいということでしょうか？

[ayuayuayu]

そうなのですね。
modal外をクリックして閉じるを試したところ、思っていた動きになりました。
ありがとうございます。
最後に一つお聞きしたいのですが、モーダルを開いたときにモーダルの中身のスクロール位置が下からになってしまうのはジャパスクリプトが関係しているのでしょうか、、？

[ayuayuayu]

$('dialog').scrollTop(0);　で出来ました。色々とありがとうございました！！！

Answer 2

history.pushState()でのURL変更は、ページに何の変更ももたらさないです。
history.backなどでpopstateなどを発火させればワンチャンあるかもですが、明らかに筋が悪いので諦めて、とりあえず、元のコードに戻すことをおすすめします。URLの処理と、モーダルの処理は別々に面倒を見た方がいいでしょう。

そして、URLで外から飛んできた場合は、urlParamを参照してdata-targetを探し、その要素を.click()した方が早いでしょう。

Comments

[ayuayuayu]

有難う御座います。history.pushState()やめて　ジャパスクリプトをかきかえてみました。
// パラメータidを判断するのところでdata-target　を探す書き方がわからなくて　modal01　と書いてありますが
paramId　と一致するdivが開ければ完成するところです、、、
模索中です、、、

[ayuayuayu]

data-target　を探すのに　var modal = document.getElementById(paramId);　は違いますか？
なかなか一致するのをさがせなくて、、

[Lhankor_Mhy]

はい、違います。属性セレクタがいいのでは。
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors