JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<ul class="row">
  <li> <a href="#" class="open" data-target='A1'>Australien</a></li>
  <li> <a href="#" class="open" data-target='A2'>Australien2</a></li>
</ul>


<div class="container A1">
  <p>
    <a href="#" class="close">close</a>
  </p>
  <p class="changeText">
    Australien
  </p>
</div>
<div class="container A2">
  <p>
    <a href="#" class="close">close</a>
  </p>
  <p class="changeText">
    Australien2
  </p>
</div>
<div class="overlay"></div>

CSS

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  height: 100%;
  width: 100%;
  background: #000;
  filter: alpha(opacity=60);
  -moz-opacity: .60;
  opacity: .60;
  display: none;
}

.container {
  position: fixed!important;
  position: absolute;
  height: 200px;
  width: 400px;
  margin: -100px 0px 0px -200px;
  top: 50%;
  left: 50%;
  background-color: #f5f5f5;
  border: 1px solid #000000;
  display: none;
  z-index: 1002;
  padding: 10px;
}

JavaScript

$(document).ready(
   function() {
     $('.open').click(
       function() {
         var target = $(this).data('target');
         $('.overlay').show('slow',
           function() {
             $('.container.' + target).fadeIn('slow');

           }
         );
       }
     );
     $('.close').click(
       function() {
         $(this).parents('.container').hide('slow',
           function() {
             $('.overlay').fadeOut();
           }
         );
       }
     );
   }
 );