JSFiddle - React, Tailwind, and code Playground

by Aleksandr Seryakov

HTML

<link rel="stylesheet" href="https://rawgit.com/daneden/animate.css/master/animate.min.css">
<body>
  <button class="btn">Мне нравится</button>
  <div id="likes">Привет, я закроюсь после нажатия на крестик</div>
</body>

CSS

#likes {
  display: none;
  width: 150px;
  background-color: #fff;
  padding: 20px 10px 10px;
  margin-top: 10px;
  font-family: sans-serif;
  line-height: 1.5;
  position: absolute;
  z-index: 100;
}

.btn-close {
  position: absolute;
  top: 0;
  right: 0;
}

.popup_thanks {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  color: #333;
}

JavaScript

$(document).ready(function() {

  var
    btn = $('.btn'), // кнопка для нажатия
    likes = $("#likes"), // попап
    close = $('<button class="btn-close">х</button>').appendTo(likes), // Создаем внутри попапа кнопку закрыть
    bg = $('.popup_thanks'), // затемнение
    time = 3000; // время до закрытия

  function closePopup() { // функция закрытия попапа
    likes.removeClass().addClass('animated zoomOut'); // скрываем попап
    bg.hide();
  }

  btn.click(function() { // ловим нажатие
    bg.show();
    likes.fadeIn().removeClass().addClass('animated zoomIn'); // показываем попап
    // setTimeout(closePopup, time); // скрываем попап за указанное время
  });

  close.click(function() {
    closePopup();
  })

});