How can we open different modal according by name? - php

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>
code:
<?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 <span>(click)</span></h5>
</div>
</div>
</div>
<h5 id="heading">Search Colleges</h5>
</div>
<?php
}
?>
<div id="<?php echo $country_name; ?>" class="modalDialog">
<div>X
<h2><?php echo $country_name; ?></h2>
<p><?php echo $about; ?></p>
</div>
</div>
In this code I want to open diffrent modal according by country name.
<span>(click)</span>
here I am echo $country_name but there is no modal showing but when I am define openModal in place of $country_name modal open so, how can I open diffrent modal according to country_name ?
Thank You

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 <span>(click)</span></h5>
</div>
</div>
</div>
<h5 id="heading">Search Colleges</h5>
</div>
<div id="<?php echo $country_name; ?>" class="modalDialog">
<div>X
<h2><?php echo $country_name; ?></h2>
<p><?php echo $about; ?></p>
</div>
</div>
<?php
}
?>