Lightweight Customizable Modal and Alert Library – SilverBox.js

Preview:

Description:

SilverBox.js  is a tiny JavaScript library for creating highly customizable popups, notifications, prompts, confirm dialogs and modal windows without sacrificing performance or quality.

How to use it:

1. Download the package and include the SilverBox’s files on the page.

<link rel="stylesheet" href="/dist/silverBox.min.css" />
<script src="/dist/silverBox.min.js"></script>

2. Create a basic alert popup using the silverBox method:

silverBox({
  text: "This Is A Basic Alert Popup."
})

3. Customize the SilverBox using the following options.

silverBox({
  // success, error, warning, info, question
  alertIcon: "",
  // direction of buttons
  buttonsDirection: "",
  // config the Cancel button
  cancelButton: {
    bgColor: "",
    borderColor: "",
    className: "",
    closeOnClick: false,
    dataAttribute: : "",
    disabled: false,
    iconEnd: "",
    iconStart: "",
    id: "",
    loadingAnimation: true,
    showButton: true,
    text: "Cancel",
    textColor: "",
  }
  // config the Confirm button
  confirmButton: {
    bgColor: "",
    borderColor: "",
    className: "",
    closeOnClick: false,
    dataAttribute: : "",
    disabled: false,
    iconEnd: "",
    iconStart: "",
    id: "",
    loadingAnimation: true,
    showButton: true,
    text: "Cancel",
    textColor: "",
  },
  // center your content or not
  centerContent: false,
  // custom icon here
  customIcon: "",
  customIconClassName: "",
  customIconId: "",
  customSvgIcon: "",
  customSvgIconClassName: "",
  customSvgIconId: "",
  // config the Deny button
  denyButton: {
    bgColor: "",
    borderColor: "",
    className: "",
    closeOnClick: false,
    dataAttribute: : "",
    disabled: false,
    iconEnd: "",
    iconStart: "",
    id: "",
    loadingAnimation: true,
    showButton: true,
    text: "Cancel",
    textColor: "",
  },
  // HTML direction
  direction: "",
  // footer content
  footer: "",
  // html content
  html: "",
  // config the input in prompt dialog
  input: {
    className: "",
    fontSize: "",
    height: "100%",
    hint: "",
    id: "",
    label: "",
    maxLength: "",
    multiplyBy: 1,
    name: "",
    numberOnly: false,
    placeHolder: "",
    placeHolderFontSize: "",
    readOnly: false,
    textAlign: "",
    type: "text", // text, number, textarea, etc
    value: "",
    width: "100%", 
  },
  position: "", // top-right, top-center, top-left, bottom-right, bottom-center, bottom-left.
  removeLoading: "",
  removeSilverBox: "",
  showCloseButton: false,
  silverBoxClassName: "",
  silverBoxId: "",
  text: "",
  theme: "light", // or "dark"
  timer: 0, // dismiss after this timeout
  // customize the title
  title: {
    alertIcon: "",
    customIcon: "",
    customIconClassName: "",
    customIconId: "",
    customSvgIcon: "",
    customSvgIconClassName: "",
    customSvgIconId: "",
    text: "",
    Title text
  }
})