JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque sequi vero expedita sapiente accusamus cumque minima enim ducimus neque at error ex sunt, modi architecto dolores adipisci amet culpa obcaecati, vel autem repellat odio officia corporis dicta tenetur. Totam quos, minima velit praesentium dolores, consequatur ipsam est cupiditate ipsum, incidunt debitis. Sequi magni animi delectus officia deserunt! Beatae velit sit facilis culpa iste, minima fugiat. Porro est impedit optio mollitia possimus laboriosam dolores quasi voluptatem fugit dignissimos, voluptatibus ea magnam, voluptas reprehenderit iusto, iste explicabo tempora laudantium nisi eius officia in dolorum quod. Vel natus sequi eligendi assumenda quas aut.</p>
<div class="flyout-module">
  <a href="#" class="trigger">Link</a>
  <div class="flyout flyout-tags">
    <p>content goes here</p>
    <p>content goes here</p>
    <p>content goes here</p>
    <a href="#" class="close-btn" title="Close"><span>×</span></a>
  </div>
</div>
<div class="flyout-module">
  <a href="#" class="trigger">Link</a>
  <div class="flyout flyout-tags">
    <p>content goes here</p>
    <p>content goes here</p>
    <p>content goes here</p>
    <a href="#" class="close-btn" title="Close"><span>×</span></a>
  </div>
</div>
<div class="flyout-module">
  <a href="#" class="trigger">Link</a>
  <div class="flyout flyout-tags">
    <p>content goes here</p>
    <p>content goes here</p>
    <p>content goes here</p>
    <a href="#" class="close-btn" title="Close"><span>×</span></a>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque sequi vero expedita sapiente accusamus cumque minima enim ducimus neque at error ex sunt, modi architecto dolores adipisci amet culpa obcaecati, vel autem repellat odio officia corporis dicta tenetur. Totam quos, minima velit praesentium dolores, consequatur ipsam est cupiditate ipsum, incidunt debitis. Sequi magni animi delectus officia deserunt! Beatae velit sit...

CSS

.flyout {
  display: none;
  padding: 20px;
  position: relative;
  background: #eee;
}

.close-btn {
  display: flex;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  position: absolute;
  top: 5px;
  right: 5px;
  text-decoration: none;
  background: #999;
  color: white;
}

.is-active {
  box-shadow: 0 0 0 1px red;
}

/*Styles not needed for demo*/

.flyout-module {
  float: left;
  width: 200px;
  margin-right: 10px;
  overflow: visible;
}

.flyout-module + p {
  padding-top: 20px;
  clear: both;
}

JavaScript

//Variables
var trigger = $(".trigger");
var flyout = $(".flyout");
var close = $(".close-btn");

$(function() {
  $(trigger).click(function(e) {  
  	
    //Hide any other flyout that's visible
    $(this).parent().siblings().find(flyout).fadeOut("fast", function(){
    	//Remove class after animation is finished
        $(this).removeClass("is-active");
    });      

    //Toggle active class
    $(this).next(flyout).toggleClass("is-active");

    //Display/hide an actual flyout
    $(this).next(flyout).fadeToggle("fast");

    e.stopPropagation();
    e.preventDefault();
  });

  //Fade out the flyout when clicking on the Close button
  $(close).click(function(e) {
    $(this).parent(flyout).fadeToggle("fast").removeClass("is-active");
    e.stopPropagation();
    e.preventDefault();
  });

  //Fade out the flyout when clicking anywhere on the page
  $(document).click(function(e){
  	if ($(e.target).closest(flyout).length === 0) {
      $(flyout).fadeOut("fast", function(){
      	//Remove class after animation is finished
        $(this).removeClass("is-active");
      });
    }
  });
  
  //Fade out the flyout when pressing the ESC key
  $(document).keydown(function(e){
  	if (e.keyCode === 27) {
      $(flyout).fadeOut("fast", function(){
      	//Remove class after animation is finished
        $(this).removeClass("is-active");
      });
    }
  });
});