モーダル表示の仕方について

いつもお世話になっております。

モーダルの表示で悩んでおります。

<link rel="stylesheet" href="css/modaal.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/modaal.min.js"></script>

<a href="#modal1" class="modal">Show1</a>
<div id="modal1" style="display:none;">
	<p>これは1です。</p>
</div>
<a href="#modal2" class="modal">Show2</a>
<div id="modal2" style="display:none;">
	<p>これは2です。</p>
</div>

<script>
$('.modal').modaal();
</script

このような形のサンプルサイトを見つけ、#modal1をクリックすると、id=modai1が表示されます。
同様に、#modal2をクリックすると、id=modaiが表示されます。

これを以下の要領で、チェックボックスの値をとって、表示するモーダルを分岐したいと考えております。
クリックをしたときにdoActionに１をいれ、それとチェックの状況を比較させ、比較結果によって、
表示させるモーダルを変えたいと考えております。
どなたか、ご教授いただけますか。
以上よろしくお願いいたします。


<p>ポップアップテスト</p>
<!-- radioボタン-->
<label><input type="radio" id="rd0" name="chk" value="1" />ラジオテスト0</label>
<label><input type="radio" id="rd1" name="chk" value="2" />ラジオテスト1</label>
<label><input type="radio" id="rd2" name="chk" value="3" />ラジオテスト2</label><br>
<br>
<div align="center"><input type='button' width='50' onClick='doAction("1");' value='クリック'></div>



<script type="text/javascript">	
	
	function doAction(temp){
		
		var str = $('input[name=chk]:checked').val();

		if(str == temp){
			//ここへid="modal1"を表示する方法の記述の仕方
			
			
			 return false;
		}else{
			//ここへid="modal2"を表示する方法の記述の仕方
			
			
			 return false;
		}
	}
	
</script>

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

回答1件

ベストアンサー

以下でどうでしょうか？
$('.modal').modaal();がありませんが、これは必要だと思うのでやっといてください。

JavaScript
1if (str == temp) {
2  //ここへid="modal1"を表示する方法の記述の仕方
3  $("#modal1").prev(".modal").click();
4  return false;
5} else {
6  //ここへid="modal2"を表示する方法の記述の仕方
7    $("#modal2").prev(".modal").click();
8  return false;
9}