Oh! Thanks God. I could finally fix it myself.
Below is the working code:
I had a lot of stress being stuck. I share it to help any one who likes to have a fully functional custom popup without any plugin. below is the code. If you are interested just ask me the css for it.
Enjoy!
Code:
<section class="section-page">
<!-- loop starts here... -->
<?php
while(have_posts()) {
the_post();
pageBanner();
?>
<div class="second-row">
<div class="Col-2-of-3">
<div class="main-content">
<div class="time"><?php the_time('F d, Y'); ?> </div>
<?php the_content(); ?></div>
</div>
<div class="Col-1-of-3">
<div class="card">
<div class="card--front">
<div class="card--picture">
</div>
<div class="card--heading">
<?php
$post_id = get_the_ID();
if($post_id == 35) { ?>
<h4 class="heading-tertiary u-margin-bottom-small u-center-text"><a>Search by first letter</a></h4>
<table class="card-table">
<tr>
<td><a href="#a">A</a></td>
<td><a href="#b">B</a></td>
<td><a href="#c">C</a></td>
<td><a href="#d">D</a></td>
<td><a href="#e">E</a></td>
<td><a href="#f">F</a></td>
<td><a href="#g">G</a></td>
</tr>
<tr>
<td><a href="#h">H</a></td>
<td><a href="#i">I</a></td>
<td><a href="#j">J</a></td>
<td><a href="#k">K</a></td>
<td><a href="#l">L</a></td>
<td><a href="#m">M</a></td>
<td><a href="#n">N</a></td>
</tr>
<tr>
<td><a href="#o">O</a></td>
<td><a href="#p">P</a></td>
<td><a href="#q">Q</a></td>
<td><a href="#r">R</a></td>
<td><a href="#s">S</a></td>
<td><a href="#t">T</a></td>
<td><a href="#u">U</a></td>
</tr>
<tr>
<td><a href="#v">V</a></td>
<td><a href="#w">W</a></td>
<td><a href="#x">X</a></td>
<td><a href="#y">Y</a></td>
<td><a href="#z">Z</a></td>
</tr>
</table>
<?php } else {
$post_cats = new WP_Query(array(
'post_type' => 'post',
'p' => get_the_ID()
));
$myArray = array();
$myArray2 = array();
$myArray3 = array();
$hero = array();
$hero2 = array();
$i = 0;
while($post_cats->have_posts()){
$post_cats->the_post();
for(;$i<=count(get_the_category()); $i++ ) {
$all_cats = get_the_category();
$all_Tags = get_the_tags();
?>
<h4 class="heading-tertiary u-margin-bottom-small u-center-text"> <?php
$hero2 = $all_Tags[0]->name;
if($hero = $all_cats[$i]->cat_name == 'Topic' OR $hero = $all_cats[$i]->cat_name == 'Project' OR $hero = $all_cats[$i]->cat_name == 'Uncategorized') {
echo '';
} else {
echo $hero = $all_cats[$i]->cat_name;
}
?>
</h4>
<?php
$hero3 = $all_cats[$i]->slug;
array_push($myArray, $hero3);
$post_tags = new WP_Query(array(
'post_type' => 'update',
'tag' => $hero2.'-'.$myArray[$i]
));
while($post_tags->have_posts()){
$post_tags->the_post();
?>
<ul>
<li class="sidebar-lists"><a class="sidebar-links" href="#<?php the_title(); ?>" ><?php
the_title();
?></a></li>
</ul>
<?php
for($d=0; $d<=2; $d++) { ?>
<div class="popup" id="<?php the_title(); ?>">
<div class="popup__content">
<!--<div class="popup__left">
<img src="<?php// echo get_theme_file_uri('/img/nat-3-large.jpg'); ?>" alt="First photo" class="popup__img">
<img src="<?php// echo get_theme_file_uri('/img/nat-2-large.jpg'); ?>" alt="First photo" class="popup__img">
</div>-->
<div class="popup__right">
<a href="#section-page" class="popup__close">×</a>
<h3 class="heading-tertiary-3 u-margin-bottom-small u-center-text">
<?php
the_title();
?>
</h3>
<div class="popup__text" style="font-size: 1.7rem">
<?php
the_content();
?>
</div>
</div>
</div>
</div>
<?php } } wp_reset_postdata();
} // for loop ends here
} wp_reset_postdata();
}
?>
</div>
<div class="card--bottom"></div>
</div>
</div>
</div>
</div>
<!-- main loop ends here... -->
<?php } ?>
</section>
<?php get_footer(); ?>