JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
  integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
<link
  crossorigin="anonymous"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css"
  integrity="sha512-hfp7UiPWaDAND/ZE+RrbMpthca5iYNxJl/uWQTOqeZqur4C6Y/kiDUsBKoUeQTvyz6EJFyDrtPefVpidGFzk+Q=="
  referrerpolicy="no-referrer"
  rel="stylesheet"
/>

<script
  crossorigin="anonymous"
  integrity="sha512-v80Z62SYCVHA3UxmFG69Vclopt+3ngQDocRjtxnB3htcTs6l9mnXc6SixuDae1rJ3L2J6p2KAuG+soHbhVd+6g=="
  referrerpolicy="no-referrer"
  src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"
></script>

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"
  integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

<div class="container">
  <br />

  <button onclick="pages_trash(1)">confirmFancybox</button>
</div>

CSS

html,body {
  color: #454545;
}

.container {
  margin-top: 5%;
}

JavaScript

function confirmDialog(options) {
  const defaults = {
    title: "Confirm",
    message: "Are you sure?",
    confirmText: "Yes",
    cancelText: "Cancel",
    onConfirm: () => {},
    onCancel: () => {},
  };

  const settings = { ...defaults, ...options };

  Fancybox.show([
    {
      type: "html",
      src: `
            <div class="confirm-box">
                <h3>${settings.title}</h3>
                <p>${settings.message}</p>
                <div class="buttons">
                    <button class="btn-confirm button button-primary">
                        ${settings.confirmText}
                    </button>
                    <button class="btn-cancel button">
                        ${settings.cancelText}
                    </button>
                </div>
            </div>
        `,
      on: {
        done: (fancybox, slide) => {
          slide.$content.find(".btn-confirm").on("click", () => {
            settings.onConfirm();
            Fancybox.close();
          });

          slide.$content.find(".btn-cancel").on("click", () => {
            settings.onCancel();
            Fancybox.close();
          });
        },
      },
    },
  ]);
}

function pages_trash(page_id) {
  confirmDialog({
    title: "Confirm Trash",
    message: "Are you sure you want to trash this item?",
    confirmText: "Delete",
    onConfirm: () => {
      $.ajax({
        type: "GET",
        url: "/ajax/content/trash",
        headers: { "X-EuroCMS-Ajax": page_id },
        success: function (data) {
          Fancybox.show([{ src: data, type: "html" }]);
          pages_get();
        },
      });
    },
  });
}