どうやって別のモーダルを名前で開くことができますか？

Question

CSS：

<style> 
    #head3{ 
     color: #fff; 
     text-align: center; 
     font-weight: bold; 
     background-image: url(images/flag/sab.jpg); 
     background-size: 1095px 180px; 
     background-repeat: no-repeat; 
     height: 180px; 
    } 
    .flip-container { 
     perspective: 1000px; 
    } 
     .flip-container:hover .flipper, .flip-container.hover .flipper { 
      transform: rotateY(180deg); 
     } 

    .flip-container, .front, .back { 
     width: 240px; 
     height: 140px; 
    } 
    .flipper { 
     transition: 0.6s; 
     transform-style: preserve-3d; 

     position: relative; 
    } 
    .front, .back { 
     backface-visibility: hidden; 

     position: absolute; 
     top: 0; 
     left: 0; 
    } 
    .front { 
     z-index: 2; 
     transform: rotateY(0deg); 
    } 
    .back { 
     background: orange; 
     transform: rotateY(180deg); 
    } 

    #head5{ 
     text-align: center; 
     margin-top: 50px; 
     font-weight: bold; 
     color: #fff; 
    } 
    .modalDialog { 
     position: fixed; 
     font-family: Arial, Helvetica, sans-serif; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: rgba(0, 0, 0, 0.8); 
     z-index: 99999; 
     opacity:0; 
     -webkit-transition: opacity 400ms ease-in; 
     -moz-transition: opacity 400ms ease-in; 
     transition: opacity 400ms ease-in; 
     pointer-events: none; 
    } 
    .modalDialog:target { 
     opacity:1; 
     pointer-events: auto; 
    } 
    .modalDialog > div { 
     width: 800px; 
     position: relative; 
     margin: 5% auto; 
     padding: 5px 20px 13px 20px; 
     background: #fff; 
    } 
    .close { 
     background: #606061; 
     color: #FFFFFF; 
     line-height: 25px; 
     position: absolute; 
     right: -12px; 
     text-align: center; 
     top: -10px; 
     width: 24px; 
     text-decoration: none; 
     font-weight: bold; 
     -webkit-border-radius: 12px; 
     -moz-border-radius: 12px; 
     border-radius: 12px; 
     -moz-box-shadow: 1px 1px 3px #000; 
     -webkit-box-shadow: 1px 1px 3px #000; 
     box-shadow: 1px 1px 3px #000; 
    } 
    .close:hover { 
     background: #00d9ff; 
    } 

    #heading{ 
     color: #fff; 
     text-align: center; 
     font-weight: bold; 
     background: #260663; 
     width: 240px; 
    } 
</style> 

コード：このコードで

<?php 
     $sql = "select * from country"; 
     $result = mysqli_query($link,$sql); 
     while ($fetch = mysqli_fetch_array($result)) 
     { 
      $id = $fetch['id']; 
      $about = $fetch['about']; 
      $country_name = $fetch['country_name']; 
?> 
<div class="col-md-3"> 
     <h5 id="heading"><?php echo $fetch['country_name']; ?></h5> 
     <div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin-top: -15px;"> 
      <div class="flipper"> 
       <div class="front"> 
        <img src="super_admin/country/flag/<?php echo $fetch['flag']; ?>" alt="USA" width="240" height="140"> 
       </div> 
       <div class="back"> 
        <h5 id="head5">About USA&nbsp;<span><a href="#<?php echo $country_name; ?>">(click)</a></span></h5> 
       </div> 
      </div> 
     </div> 
     <h5 id="heading">Search Colleges</h5> 
    </div> 
<?php 
     } 
?> 

<div id="<?php echo $country_name; ?>" class="modalDialog"> 
    <div><a href="#close" title="Close" class="close">X</a> 
     <h2><?php echo $country_name; ?></h2> 
     <p><?php echo $about; ?></p> 
    </div> 
</div> 

私は国の名前で応じ切り抜いたモーダルを開くようにしたいです。

<span><a href="#<?php echo $country_name; ?>">(click)</a></span> 

ここで私はエコーの$ COUNTRY_NAMEていますが、何のモーダル示すがありませんが、私はとてもオープンCOUNTRY_NAMEモーダル$の代わりにopenModalを定義していたときに、どのように私はCOUNTRY_NAMEに応じて切り抜いたモーダルを開くことができますか？

は

Answer 1

<?php 
     $sql = "select * from country"; 
     $result = mysqli_query($link,$sql); 
     while ($fetch = mysqli_fetch_array($result)) 
     { 
      $id = $fetch['id']; 
      $about = $fetch['about']; 
      $country_name = $fetch['country_name']; 
?> 
<div class="col-md-3"> 
     <h5 id="heading"><?php echo $fetch['country_name']; ?></h5> 
     <div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin-top: -15px;"> 
      <div class="flipper"> 
       <div class="front"> 
        <img src="super_admin/country/flag/<?php echo $fetch['flag']; ?>" alt="USA" width="240" height="140"> 
       </div> 
       <div class="back"> 
        <h5 id="head5">About USA&nbsp;<span><a href="#<?php echo $country_name; ?>">(click)</a></span></h5> 
       </div> 
      </div> 
     </div> 
     <h5 id="heading">Search Colleges</h5> 
    </div> 
    <div id="<?php echo $country_name; ?>" class="modalDialog"> 
     <div><a href="#close" title="Close" class="close">X</a> 
      <h2><?php echo $country_name; ?></h2> 
      <p><?php echo $about; ?></p> 
     </div> 
    </div> 
<?php 
     } 
?>