JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css">
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<div class="popup">
  popup
</div><br />
<div class="popup_diary">
  popup diary
</div><br />
<div class="popup_icon">
  popup icon
</div>

CSS

div {
  margin: 20px;
  padding: 5px;
  color: #fff;
  text-align: center;
  max-width: 100px;
  background-color: #50c0dd
}

JavaScript

$(function() {
  $(".popup").colorbox({
    iframe: true,
    width: "35%",
    height: "55%",
    opacity: 0.7,
    onClosed: function() {
      alert('popup closed !')
    },
  });
});

$(function() {
  $(".popup_diary").colorbox({
    iframe: true,
    width: "750px",
    height: "80%",
    opacity: 0.3,
    onClosed: function() {
      alert('popup diary closed !')
    },
  });
});

$(function() {
  $(".popup_icon").colorbox({
    iframe: true,
    width: "820px",
    height: "70%",
    opacity: 0.3,
    onClosed: function() {
      alert('popup icon closed !')
    },
  });
});