<div class="actions">
  <button class="open-dialog">Open Top Layer Dialog</button>
  <button class="open-swal-from-dialog">Open SweetAlert Dialog</button>
</div>
<dialog>
  <div>Rad! <span>🤙</span></div>
  <button class="open-swal">Open SweetAlert Dialog</button>
  <button class="close-dialog">Close Dialog</button>
</dialog>

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  background: var(--gradient-1);
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: "Google Sans", sans-serif, system-ui;
}

.actions {
  display: flex;
  position: relative;
  gap: var(--size-2);
}

button {
  transform: translateX(var(--x, 0)) scale(var(--scale, 1));
  padding: var(--size-2) var(--size-4);
  background: hsl(210 60% var(--lightness, 30%));
  transition: background 0.25s, transform 0.25s;
  color: var(--gray-0);
  font-size: var(--font-size-1);
}

.actions {
  position: fixed;
  bottom: 10vmin;
  left: 50%;
  transform: translateX(-50%);
}

button:hover {
  --scale: 1.1;
  --lightness: 40%;
}

button:active {
  --scale: 0.9;
  --lightness: 20%;
}

.swal-content {
  color: var(--gray-9);
  font-size: var(--font-size-fluid-2);
  font-weight: var(--font-weight-6);
}

.hand {
  animation: wiggle 3s infinite;
  display: inline-block;
  transform-origin: 65%;
}

@keyframes wiggle {
  0%,
  10%,
  20%,
  30%,
  40% {
    transform: rotateY(180deg) rotate(-8deg);
  }
  5%,
  15%,
  25%,
  35%,
  45% {
    transform: rotateY(180deg) rotate(8deg);
  }
  50%,
  100% {
    transform: rotateY(180deg) rotate(0);
  }
}

dialog {
  font-size: var(--font-size-fluid-2);
  font-weight: var(--font-weight-6);
  transition: transform var(--ease-elastic-4);
  transform: translateY(calc(var(--hide, 1) * 100vmin));
}

dialog span {
  animation: wiggle 3s infinite;
  display: inline-block;
  transform-origin: 65%;
}

dialog[open] {
  --hide: 0;
}

dialog::backdrop {
  background: hsl(0 0% 10% / 0.5);
  backdrop-filter: blur(2px);
}

import swal from "https://cdn.skypack.dev/sweetalert";

const BUTTON = document.querySelector("button.open-swal");
const OPEN_BUTTON = document.querySelector("button.open-dialog");
const CLOSE_BUTTON = document.querySelector("button.close-dialog");
const OPEN_SWAL_BUTTON = document.querySelector("button.open-swal-from-dialog");
const DIALOG = document.querySelector("dialog");

const OPEN_DIALOG = () => {
  DIALOG.showModal();
};
const CLOSE_DIALOG = () => {
  DIALOG.close();
};

const content = document.createElement("div");
content.innerHTML = `
  Rad! <span class="hand">🤙</span>
`;
const INNER_BTN = content.querySelector("button");

const OPEN_SWAL = () => {
  swal({
    content,
    buttons: {
      dialog: {
        text: "Open Top Layer Dialog",
        className: "open-top-layer-dialog",
        closeModal: false
      },
      ok: {
        text: "OK",
        closeModal: true,
        className: "swal-button--confirm"
      }
    }
  }).then((value) => {
    switch (value) {
      case "dialog":
        OPEN_DIALOG();
        break;
      default:
        return false;
    }
  });
};

BUTTON.addEventListener("click", OPEN_SWAL);
OPEN_SWAL_BUTTON.addEventListener("click", OPEN_SWAL);

OPEN_BUTTON.addEventListener("click", OPEN_DIALOG);
CLOSE_BUTTON.addEventListener("click", CLOSE_DIALOG);