画像をクリックしたらパラメーターを付けたい

Question

画像をクリックしたらモーダルウィンドウを開いて画像と説明文を表示させています

そこに外部からリンクで飛んできたときもその画像のモーダルウィンドウを開いた状態にしたいのですが
それをするにはパラメーターを付けなきゃいけないのはわかりました、
クリックしたらパラメーターを付けることはできました
ですがアイテムがなんこもあるので一つ一つにアイテム1、アイテム2というふうにパラメーターを付けることはかのうでしょうか？

参考さいとをみながらやってみたもののうまくできません、、、
何からやったらいいのでしょうか、、、

参考サイト
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>	
			<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="modal01"><img src="img/bag1.png"></a>
			</li>	
			<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="modal01"><img src="img/bag1.png"></a>
			</li>	
			<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="modal01"><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>

<div id="modal03" 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>
	
$('.js-modal-open').on('click', function(){
	//パラメーターを付ける
	let setParam = '?item=aaa';
  history.pushState(null, null, setParam);

	// モーダルウィンドウを開く
	var target = $(this).data('target');
  var modal = document.getElementById(target);
  scrollPosition = $(window).scrollTop();

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

	
});		
	

</script>	
	

/* モーダル全体(背景＋本体) */
.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;
}
.modal-content img{
	width:100%;
}

Answer 1

var target = $(this).data('target');

↑これにidが入っていると思うので、'aaa'の代わりに使えばいいかと思います。

Comments

[ayuayuayu]

できました。ありがとうございます。

[Lhankor_Mhy]

お役に立てたようで何よりです