JSFiddle - React, Tailwind, and code Playground

by Aakash Khapare M

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<div ng-app="myApp">
  <popup-container>
    <div class="container">
      <div class="link-container">
        <a href="#" ng-click="show = !show"><i class="fa fa-link"></i></a>
      </div>
      <popup ng-if="show"></popup>

    </div>
  </popup-container>
</div>

SCSS

.container {
  position: relative;  

  .pop-up {
    position: absolute;
    top: 24px;
    background-color: grey;
    z-index: 9999;
    width: 300px;
    height: 200px;
  }
}

JavaScript

class MyPopupContainer {
	constructor() {
  	this.show = false;
  }
}

class MyPopup {}

const MyPopupComponent = {
 controller: MyPopup,
 template: `<div class="pop-up"> Just a popup! </div>`
}


angular.module('myApp', [])
.component('popupContainer', MyPopupContainer)
.component('popup', MyPopupComponent);