Download
- Overview
- Documents
- Demos
User Rating: 4.3/5 ( 1 votes)
Your Rating:
PexxAlert is an advanced javascript alert library for websites and Progressive Web Apps with 5 Fully customizable templates and sound effects
Templates:
- Alert
- Confirm
- Progress
- Input
- Call
Source: github.com
1. INCLUDE JS AND CSS FILES
<link rel="stylesheet" type="text/css" href="path-to-css/pexxalert.min.css"> <script type="text/javascript" src="path-to-js/jquery.js"></script> <script type="text/javascript" src="path-to-js/pexxalert.min.js"></script>
2. JAVASCRIPT
// For alert const alert = new pexxalert($, window, 'alert', { anchor: 'body' }); // For confirm const confirm = new pexxalert($, window, 'confirm', { anchor: 'body' }); // For progress const progress = new pexxalert($, window, 'progress', { anchor: 'body' }); // For input const input = new pexxalert($, window, 'input', { anchor: 'body' }); // For call const call = new pexxalert($, window, 'call', { anchor: 'body' });
3. Global Object Options
Option | Type | Default | Purpose |
---|---|---|---|
anchor | string | "body" | Anchor element to which all alerts are appended. Start string with "." for class selection or "#" for id selection. |
stack | boolean | false | Stacking alert messages against each other. NOTE: This option only works for both Alert and Progress templates. |
stack_position | string | "top" | Stacking order. NOTE: This option only works if stacking is enabled and only supports "top" and "bottom". |
theme | boolean | true | Determines whether to enable dark or light mode themes. NOTE: This option does not rely on a browser's OS. |
theme_type | string | "snow" | Set to apply dark or light theme color palette. NOTE: This option only works if theme is enabled supports "snow" and "darcula". |
theme_backgrounds | object | { snow : { solid : '#FFFFFF', alpha : 'rgba(255,255,255,0.5)', color : '#363636' }, darcula : { solid : '#363636', alpha : 'rgba(54,54,61,0.5)', color : '#FFFFFF' } } | Defines set of color palettes to be used for dark and light mode themes. NOTE: This option is only applicable if theme is enabled. |
accent | string | "#6671F0" | Color to be applied to buttons and other indicators. |
blur | boolean | true | Determines whether to apply back-drop blur filter or a solid one. |
static_background | string | "#6671F0" | Background color for templates when theme and blur has been disabled. |
static_color | string | "#FFFFFF" | Text color for templates when theme has been disabled. |
static_alpha | string | "rgba(102,113,240,0.5)" | Background color for templates when theme has been disabled but blur is enabled. |
responsive | boolean | true | Determines whether to set different positions of alert for mobile and desktop resolutions. NOTE: This option only applies to Alert templates. |
responsiveness_threshold | int | 800 | Threshold to determine when to use mobile or desktop versions of the Alert template. If view width is within this value, mobile is set else desktop is set. |
auto_close | boolean | true | Set to enable or disable auto-close for alerts. Applies to only Alert templates. |
auto_close_speed | int | 2500 | Number of seconds before alert gets auto-closed. NOTE: Time unit is milliseconds and applies to only Alert templates. |
landscape | boolean | false | Force set landscape for alerts. NOTE: This option only works when responsive is enabled and applies to Alert templates. |
force_padding | int | 0 | Set extra top padding for alerts to get away with device status bar or notch coverage. |
4. Display Method Options
Alert
Option | Type | Default | Purpose |
---|---|---|---|
message | string | "Test Message" | Alert message text. |
type | string | "success" | Defines if alert message is success or an error. NOTE: This option only supports "success" and "error". |
call_back | function | function | Function triggered on alert closure. |
Alert
Option | Type | Default | Purpose |
---|---|---|---|
message | string | "Test Message" | Alert message text. |
type | string | "success" | Defines if alert message is success or an error. NOTE: This option only supports "success" and "error". |
call_back | function | function | Function triggered on alert closure. |
Confirm
Option | Type | Default | Purpose |
---|---|---|---|
title | string | "Run This Test?" | Context title. |
message | string | "This process will run and do what it has to" | Message text. |
accept_label | string | "Yes" | Text on acceptance button. |
reject_label | string | "No" | Text on rejection button. |
fragment | boolean | true | Determines whether or not to allow URL fragmenting for template. |
call_back | function | function | Function triggered on choice selection. |
Progress
Option | Type | Default | Purpose |
---|---|---|---|
title | string | "Run This Test?" | Progress task label/title. |
call_back | function | function | Function triggered on prrogress template show. This function makes available both progress hand and element for progress manipulation. |
Input
Option | Type | Default | Purpose |
---|---|---|---|
title | string | "Your Favorite Fruit?" | Context title. |
message | string | "No vegetables please" | Message text of requied input. |
placeholder | string | "Enter a fruit" | Input field placeholder. |
type | string | "text" | Determines the accepted input type. NOTE: This option supports both text and number input types. |
process_label | string | "Submit" | Text on process button. |
discard_label | string | "Discard" | Text on discard button. |
fragment | boolean | true | Determines whether or not to allow URL fragmenting for template. |
call_back | function | function | Function triggered on input submission. NOTE: This fuction returns the choice selected, the selected button and input for processing. |
Call
Option | Type | Default | Purpose |
---|---|---|---|
routing_id | int | 0 | A webRTC id [ custom usage ]. |
name | string | "John" | Caller screen name [ custom usage ]. |
username | string | "johnney" | Caller screen username [ custom usage ]. |
avatar | string | "" | Caller avatar/image source URL [ custom usage ]. |
type | string | "video" | Call type [ custom usage ]. This option only supports "video" and "audio". |
call_back | function | function | Function triggered on choice selection. [ custom usage ] |