bitacora/public/assets/extra-libs/block-ui/block-ui.js

$(function () {
  $(".block-card").on("click", function () {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<i class="fas fa-spin fa-sync text-white"></i>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#000",
        opacity: 0.5,
        cursor: "wait",
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent",
      },
    });
  });

  // Block sidebar
  $(".block-sidenav").on("click", function () {
    var block_ele = $(".left-sidebar");
    $(block_ele).block({
      message: '<i class="fas fa-spin fa-sync text-white"></i>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#000",
        opacity: 0.5,
        cursor: "wait",
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent",
      },
    });
  });

  // Block page
  $(".block-default").on("click", function () {
    $.blockUI({
      message: '<i class="fas fa-spin fa-sync text-white"></i>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#000",
        opacity: 0.5,
        cursor: "wait",
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent",
      },
    });
  });

  // onBlock callback
  $(".onblock").on("click", function () {
    $.blockUI({
      message: '<i class="fas fa-spin fa-sync text-white"></i>',
      fadeIn: 1000,
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#000",
        opacity: 0.5,
        cursor: "wait",
      },
      css: {
        border: 0,
        padding: 0,
        color: "#333",
        backgroundColor: "transparent",
      },
      onBlock: function () {
        alert("Page blocked!");
      },
    });
  });

  // onUnblock callback
  $(".onunblock").on("click", function () {
    $.blockUI({
      message: '<i class="fas fa-spin fa-sync text-white"></i>',
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#000",
        opacity: 0.5,
        cursor: "wait",
      },
      css: {
        border: 0,
        padding: 0,
        color: "#333",
        backgroundColor: "transparent",
      },
      onUnblock: function () {
        alert("Page unblocked!");
      },
    });
  });

  // Overlay callback
  $(".onoverlay-click").on("click", function () {
    $.blockUI({
      message: '<i class="fas fa-spin fa-sync text-white"></i>',
      overlayCSS: {
        backgroundColor: "#000",
        opacity: 0.5,
        cursor: "wait",
      },
      css: {
        color: "#333",
        border: 0,
        padding: 0,
        backgroundColor: "transparent",
      },
      onOverlayClick: $.unblockUI,
    });
  });

  // Block Without Message
  $(".without-msg").on("click", function () {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: null,
      timeout: 2000, //unblock after 2 seconds
      overlayCSS: {
        backgroundColor: "#000",
        opacity: 0.5,
        cursor: "wait",
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent",
      },
    });
  });

  // Block without overlay
  $(".without-overlay").on("click", function () {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<i class="fas fa-spin fa-sync text-white"></i>',
      showOverlay: false,
      timeout: 2000, //unblock after 2 seconds
      css: {
        width: 50,
        height: 50,
        lineHeight: 1,
        color: "#fff",
        border: 0,
        padding: 15,
        backgroundColor: "#000",
      },
    });
  });

  // Unblock on overlay click
  $(".overlay-unblock").on("click", function () {
    var block_ele = $(this).closest(".card");
    $(block_ele).block({
      message: '<i class="fas fa-spin fa-sync text-white"></i>',
      overlayCSS: {
        backgroundColor: "#000",
        opacity: 0.5,
        cursor: "wait",
      },
      css: {
        border: 0,
        padding: 0,
        backgroundColor: "transparent",
      },
    });

    $(".blockOverlay").on("click", function () {
      $(block_ele).unblock();
    });
  });

  // Growl notification
  $(".growl").on("click", function () {
    $.blockUI({
      message: $(".growl-notification-example"),
      fadeIn: 700,
      fadeOut: 700,
      timeout: 3000,
      showOverlay: false,
      centerY: false,
      css: {
        width: "250px",
        top: "20px",
        left: "",
        right: "20px",
        border: "none",
        padding: "15px 5px",
        backgroundColor: "#000",
        "-webkit-border-radius": "10px",
        "-moz-border-radius": "10px",
        opacity: 0.9,
        color: "#fff",
      },
    });
  });
});