JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<div class="post">
  <a href="#" class="send-this">Send This</a>
</div>
<div class="post">
  <a href="#" class="send-this">Send This</a>
</div>
<div class="post">
  <a href="#" class="send-this">Send This</a>
</div>
<div class="post">
  <a href="#" class="send-this">Send This</a>
</div>
<div class="post">
  <a href="#" class="send-this">Send This</a>
</div>
<div class="post">
  <a href="#" class="send-this">Send This</a>
</div>
<div class="overlay"></div>
<div class="model-box">
  <a href="#" id="close-this">Close This</a>
</div>

CSS

.overlay{
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

.model-box{
  width: 50%;
  height: 80%;
  background: #fff;
  opacity: 1;
  position: fixed;
  top: 30px;
  left: 50%;
  margin-left: -25%;
  display: none;
}

JavaScript

// send-this's handler function
	
  // get overlay element x
  // show overlay [x.style.display = 'block']
  // get model-box element
  // show model-box

// close-this's handler function
	
  // get overlay element x
  // hide overlay [x.style.display = 'none']
  // get model-box element
  // hide model-box

// get send-this elements (HTML Collection)

// iterate the send-this elements

	// add click event listener for each send-this

// get close-this element
// add click event listener for close-this