Author: | Silverethical |
---|---|
Views Total: | 51 views |
Official Page: | Go to website |
Last Update: | May 25, 2023 |
License: | MIT |
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 } })