XSAlert

A nice, easy-to-use, responsive and fully customizable JavaScript Alert
[jQuery required]

examples installation usage configuration button actions icons input types themes donate sponsors

Fire classic alert

alert('I am nothing more than an alert 😔')

Fire XSAlert! 🔥

XSAlert({
   title: 'Hi there!',
   message: 'I am a super cool Alert! 😎',
   icon: 'favicon.png',
   hideCancelButton: true
})

• examples •

Basic Alert with title and OK button

Fire Alert!

 XSAlert({
   title: "Hi there 😎 <br>Either hit Enter or click 'OK'",
   hideCancelButton: true
})

Basic Alert with title, message and OK button

Fire Alert!

 XSAlert({
   title: "Hola!",
   message: 'This is a simple, yet cool alert with a button and a message!',
   hideCancelButton: true
})

Dismiss the Alert by clicking outside it

Fire Alert!

 XSAlert({
   title: "Ciao!",
   message: 'Click outside me to make me disappear!',
   hideCancelButton: true,
   closeOnOutsideClick: true
})

Error Alert with title, icon, message and HREF footer

Fire Alert!

 XSAlert({
   title: "Ouch!",
   message: "Something's just not right at the moment",
   icon: 'error',
   hideCancelButton: true,
   footer: '<a href="#">Click here for more info</a>'
})

What about custom HTML for the message?

Fire Alert!

 XSAlert({
   title: "Hi there 😎",
   message: "I'm a <strong>HTML</strong> message <em>so I can do <span style='background: #ccc;'>this</span><br>and also <a href='https://xsgames.co'>THIS</a>, and <button style='padding: 6px 18px; border:none; background: #121212; color: yellow; border-radius: 99px' onClick='doSomething()'>this</button>",
   hideCancelButton: true
})

Wow, 3 Buttons in a row, with a
response for each choice!

Fire Alert!

 XSAlert({
   title: 'Hey you',
   message: "What's your favorite drink? 👇",
   okButtonText: '🍷 Wine',
   cancelButtonText: "🚫 I don't drink",
   thirdButtonText: "🍹 Tropical Drink",
   closeOnOutsideClick: true,

 }).then((result) => {
   if(result == 'ok') { XSAlert({ message: 'Your fav drink is '+$('#xs-ok-btn').text(), backgroundColor: '#e57373' })
   } else if(result == 'third') { XSAlert({ message: 'Your fav drink is '+$('#xs-third-btn').text(), backgroundColor: '#ffc107' }) }
})

A nice party with colors and fonts!

Fire Alert!

 <!-- Import Google Web Font Loader inside <head> tag -->
 <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
 <script>WebFont.load({ google: { families: ['Julee', 'Montserrat', 'Anton', 'Wire One'] } });</script>

 XSAlert({
   title: "Look at me 🤓",
   titleFontSize: '32px',
   titleFontFamily: 'Anton',
   titleColor: 'purple',
   message: 'I love my font and color!',
   messageFontSize: '20px',
   messageFontFamily: 'Julee',
   backgroundColor: '#fff176',
   messageColor: '#ff5722'
 })

More styling options and animations!

Fire Alert!

 XSAlert({
	title: "Love ya ❤️‍🔥",
   message: 'Look at the borders and how I show up!',
	okButtonText: "Isn't",
   thirdButtonText: 'this',
   cancelButtonText: 'Cool?',
   animation: 'rotate-scale-up-horizontal',
   okButtonBackgroundColor: '#673ab7',
   okButtonTextColor: '#fff',
   cancelButtonBackgroundColor: '#cddc39',
   cancelButtonTextColor: '#607d8b',
   thirdButtonBackgroundColor: '#03a9f4',
   thirdButtonTextColor: '#fff',
   borderSize: '10px',
   borderColor: '#673ab7',
	 borderRadius: '10px 40px 10px 40px',
   buttonsOnLeft: true,
   boxShadow: '8px 8px 0px #717171',
})

Use a custom background image

Fire Alert!

 XSAlert({
   title: "Wow, I've got a custom background image 🤩",
   hideCancelButton: true,
   overlayImageURL: 'assets/bkg.jpg'
})

Pop up on different positions!

Fire Alert!

 XSAlert({
   title: "Hey, I'm here! ↗️",
   position: 'top-right',
   hideCancelButton: true
})

We've got an input field with results
based on your text

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "What's your name",
   inputType: 'text',
   inputPlaceholder: 'Ex: Frank Eno',
   cancelButtonText: 'Forget it'
 }).then((result) => {
   if(result == 'ok'){
      if($('#xs-input').val() == '') { XSAlert({ message: "How come you don't have a name? 🤔"})
      } else { XSAlert({ title: 'Nice!', message: 'Your name is "'+$('#xs-input').val()+'"' }) }
   } else if(result == 'cancel' || result == 'outside'){ XSAlert({ message: "It's ok if you don't wanna tell me your name 😉" }) }
})

What about adding custom image?

Fire Alert!

 XSAlert({
   message: 'A picture speaks more than 1000 words 🖼️',
   imageURL: 'https://picsum.photos/600/300'
})

Close the alert with the esc key

Fire Alert!

 XSAlert({
   title: "Close with ESC",
   message: 'Hit esc on your keyboard to dismiss this alert!',
   closeWithESC: true
})

Alert can automatically close after
a specified time (in ms)

Fire Alert!

 XSAlert({
   title: "Hi there 😎",
   message: "Hold on, I'm gonna close in 2 seconds...",
   autoCloseTimer: 2000,
   hideProgressBar: false, // 'true' to hide
   hideProgressIcon: false, // 'true' to hide
   hideOkButton: true,
   hideCancelButton: true
   // You can also perform an action after cllosing the alert
 }).then((result) => {
   if(result == 'autoClosed') {
      XSAlert({message: 'Alert has closed automatically!', hideCancelButton: true, closeOnOutsideClick: true })
   }
})

Perfomr an AJAX request

Fire Alert!

 XSAlert({
   title: "Find a Twitter user",
   message: 'Type a Twitter @handle',
   closeOnOutsideClick: true,
   okButtonText: 'Find user!',
   inputType: 'text',
   inputPlaceholder: 'Ex: xsgames_',
 }).then((result) => {
   var un = $('#xs-input').val();
   if(result == 'ok'){
      if($('#xs-input').val() != '') {
         $.ajax({
            url : "get-user.php",
            type: 'POST',
            data: 'handle='+ $('#xs-input').val(),
            success: function(data) {
               XSAlert({
                  title: userName,
                  message: '@'+un,
                  imageURL: userImage,
                  imageWidth: '280',
                  imageHeight: '280',
                  closeOnOutsideClick: true
               });
            }, error: function(e) {
               XSAlert({ title: 'Ouch!', message: e.message })
         }});
      } else { XSAlert({ title: 'Ouch!', icon: 'warning', message: 'Please type a valid Twitter @handle' }) }
   }
})

• download and install •

Download on GitHub

Or grab it from jsdelivr CDN

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/themes/light-theme.css">
 <script src="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/xsalert.js"></script>

• Usage •

Initialize the plugin by referencing the necessary files inside the <head> tag (jQuery is required):

If you've downloaded this plugin from GitHub, reference to the files in the src folder:

 <!-- jQuery -->
 <script src="path-to/src/jquery.min.js"></script>
 <!-- XSAlert CSS -->
 <link rel="stylesheet" href="path-to/src/themes/light-theme.css">
 <!-- XAlert core JS -->
 <script src="path-to/src/xsalert.js"></script>

If you want to use jsdelivr CDN instead:

 <!-- jQuery -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <!-- XSAlert CSS -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/themes/light-theme.css">
 <!-- XAlert core JS -->
 <script src="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/xsalert.js"></script>

Ready? Fire your cool alert with a few lines:

 <script>
   XSAlert({
      title: 'Hi there!',
      message: 'I am a super cool Alert! 😎',
      icon: 'success',
   })
 </script>

• configuration •

Argument	Description
`title`	The title of the alert. You can use both plain text and HTML [NOTE] XSAlert does not sanitize this parameter. It is your responsibility to escape any user input when using the HTML option, to prevent XSS attacks
`message`	The message of the alert. You can use both plain text and HTML [NOTE] XSAlert does not sanitize this parameter. It is your responsibility to escape any user input when using the HTML option, to prevent XSS attacks
`icon`	Either the default icon or a custom one, set by a URL. The default icons are `error`, `success`, `warning` and `question`
`titleFontSize`	Set the font size of the title (in px)
`titleFontFamily`	Set the font family of the title (need to import Google Fonts in your page)
`messageFontSize`	Set the font size of the message (in px)
`messageFontFamily`	Set the font family of the message (need to import Google Fonts in your page)
`position`	Choose where the alert must show up on the screen The available positions are `center` (default), `top-right`, `top-left`, `bottom-left` and `bottom-right`
`animation`	Choose the popup animation of the alert The available animations are `scale-up-center`, `scale-up-top`, `scale-up-bottom`, `slide-top`, `slide-bottom`, `jello-horizontal`, `jello-vertical`, `jello-diagonal`, `rotate-top`, `rotate-scale-up`, `rotate-scale-down`, `rotate-scale-up-horizontal`, `rotate-scale-up-vertical`, `blur-in`, `shake-horizontal`, `shake-left-right`, `bounce-top`
`okButtonText`	Set a custom text for the OK button
`cancelButtonText`	Set a custom text for the Cancel button
`thirdButtonText`	Set a custom text for the Third button
`okButtonBackgroundColor`	Set a background color for the OK button [`#121212`, `purple` or `rgba(12,12,12,0.5)`]
`okButtonTextColor`	Set a color for the OK button's text [`#121212`, `purple` or `rgba(12,12,12,0.5)`]
`cancelButtonBackgroundColor`	Set a background color for the Cancel button [`#121212`, `purple` or `rgba(12,12,12,0.5)`]
`cancelButtonTextColor`	Set a color for the Cancel button's text [`#121212`, `purple` or `rgba(12,12,12,0.5)`]
`thirdButtonBackgroundColor`	Set a background color for the Third button [`#121212`, `purple` or `rgba(12,12,12,0.5)`]
`thirdButtonTextColor`	Set a color for the Third button's text [`#121212`, `purple` or `rgba(12,12,12,0.5)`]
`hideOkButton`	Set it to `true` to hide the OK button Without this parameter, the OK button will be visible by default
`hideCancelButton`	Set it to `true` to hide the Cancel button Without this parameter, the Cancel button will be visible by default
`buttonBorderRadius`	Set the value in px of the border radius you want for all the alert buttons
`closeOnOutsideClick`	Set it to `true` to dismiss the alert by clicking outside it
`closeWithESC`	Set it to `true` to dismiss the alert by hitting the `esc` key on your keyboard
`backgroundColor`	Set the background color of the alert [`#121212`, `purple` or `rgba(12,12,12,0.5)`]
`borderSize`	Set the border size of the alert (in px)
`borderColor`	Set the border color of the alert [`#121212`, `purple` or `rgba(12,12,12,0.5)`]
`borderRadius`	Set the border radius of the alert (in px or %). You can use either a single value like `10px`, or all 4 values, like `10px 40px 12px 27px`
`buttonsOnLeft`	Set it to `true` to move the buttons on the left side of the alert
`buttonsOnRight`	Set it to `true` to move the buttons on the right side of the alert
`boxShadow`	Use it to set the `box-shadow` CSS property and add a shadow to the alert Ex: `'8px 8px 0px #717171'`
`overlayImageURL`	Set a URL of an image for the overlay behind the alert
`footer`	Use either plain text or HTML are allowed to enable a footer on the alert [NOTE] XSAlert does not sanitize this parameter. It is your responsibility to escape any user input when using the HTML option, to prevent XSS attacks
`inputType`	Set the input type of the alert The available ones are listed on the Input Types list You can also use multiple inputs by building them in the `message` parameter as HTML code
`inputPlaceholder`	The placeholder text of the default alert's input field
`inputValue`	The value of the default alert's input field
`inputAttributes`	Set the attribute of a file-type input (ex: `image/`, `video/`, etc.)
`imageURL`	Set the URL for a custom image to show above the title
`imageWidth`	Set the width of the alert's custom image (no need to add `'px'` as suffiux) [NOTE] A custom image is responsive so its width will never go out of the alert's bounds. Use this parameter to adjust the width of an image that may result too big for the screen
`imageHeight`	Set the height of the alert's custom image (no need to add `'px'` as suffiux) [NOTE] A custom image is responsive so its width will never go out of the alert's bounds. Use this parameter to adjust the height of an image that may result too tall for the screen
`autoCloseTimer`	Set a number (in ms) for an alert that must automatically dismiss after a certain amount of time
`hideProgressBar`	Set it to `true` to hide the default horizontal progress bar that shows up after adding the `autoCloseTimer` parameter
`hideProgressIcon`	Set it to `true` to hide the default animated icon that shows up after adding the `autoCloseTimer` parameter

• button actions •

Either you click on the alert's buttons or outside it, or the alert gets dismissed automatically with a timer, its Promise returns a value
Here's how you handle each result using the proper keys:

 XSAlert({
   title: ...
   ...
   // Handle buttons 👇
   }).then((result) => {
      if(result == 'ok'){ // OK button clicked! }

      if(result == 'third'){ // Third button clicked!') }

      if(result == 'cancel'){ // Cancel button clicked!') }

      if(result == 'outside'){ // Click went outside the alert!') }

      if(result == 'autoClosed') { // Alert closed automatically! }
})

• icons •

Here's a list of default icons

success

warning

error

question

notification

like

thumbup

thumbdown

• input types •

Check out the input types supported by XSAlert and how to handle them with Promise results

text

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Tell me anything",
   inputType: 'text',
   inputPlaceholder: 'Type something...',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      if($('#xs-input').val() == '') {
         XSAlert({ message: "Please type something"})
      } else {
         XSAlert({ title: 'Nice!', message: 'You just told me: "'+$('#xs-input').val()+'"' })
      }
   }
})

email

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "What's your email address?",
   inputType: 'email',
   inputPlaceholder: 'Enter your email address',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      if($('#xs-input').val() == '') {
         XSAlert({ message: "Please type something"})
      } else {
         if(!$('#xs-input').val().includes('@')) {
            XSAlert({ message: "Please type a valid email address"})
         } else {
            XSAlert({ title: 'Nice!', message: 'Your email address is: "'+$('#xs-input').val()+'"' })
         }
      }
   }
})

url

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Enter a URL",
   inputType: 'url',
   inputPlaceholder: 'http://',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      let prefix = ['https://', 'http://', 'www.'];
      if($('#xs-input').val() == '') {
         XSAlert({ message: "Please type something"})
      } else {
         if(!prefix.some(item => $('#xs-input').val().includes(item))){
            XSAlert({ message: "Please type a valid email URL"})
         } else {
            XSAlert({ title: 'Nice!', message: 'Your URL is: "'+$('#xs-input').val()+'"' })
         }
      }
   }
})

password

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Enter a password",
   inputType: 'password',
   inputPlaceholder: 'Enter your password',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      if($('#xs-input').val() == '') {
         XSAlert({ message: "Please type something"})
      } else {
         XSAlert({ title: 'Nice!', message: 'Your password is: "'+$('#xs-input').val()+'"' })
      }
   }
})

textarea

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Enter a password",
   inputType: 'textarea',
   inputPlaceholder: 'Type your message...',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      if($('#xs-textarea').val() == '') {
         XSAlert({ message: "Please type something"})
      } else {
         XSAlert({ title: 'Nice!', message: 'Your message is: "'+$('#xs-textarea').val()+'"' })
      }
   }
})

select

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Let's play music!",
   inputType: 'select',
   inputValue: ['🎸 Guitar', '🪕 Banjo', '🎺 Trumpet', '🎹 Piano', '🎷 Saxophone'],
   inputPlaceholder: 'Select an instrument',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      if($('#xs-select').val() == null || $('#xs-select').val() == ''){
         XSAlert({ message: "Please an instrument"})
      } else {
         XSAlert({ title: 'Nice!', message: 'You have selected: "'+$('#xs-select').val()+'"' })
      }
   }
})

datetime local

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Select a date and time",
   inputType: 'datetime-local',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      if($('#xs-input').val() == '') {
         XSAlert({ message: "Please select a date"})
      } else {
         XSAlert({ title: 'Nice!', message: 'Your datetime is: "'+new Date($('#xs-input').val()).toLocaleString()+'"' })
      }
   }
})

date

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Select a date",
   inputType: 'date',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      if($('#xs-input').val() == '') {
         XSAlert({ message: "Please select a date"})
      } else {
         XSAlert({ title: 'Nice!', message: 'Your date is: "'+new Date($('#xs-input').val()).toLocaleString()+'"' })
      }
   }
})

file

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Select an image",
   inputType: 'file',
   inputAttributes: 'image/*',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      if(fileData == null) {
         XSAlert({ message: "Please select an image"})
      } else {
         XSAlert({ title: 'Nice!', message: 'Your file is:', imageURL: fileData, })
      }
   }
})

number

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Enter a number",
   inputType: 'number',
   inputPlaceholder: 'Ex: 1234',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      if($('#xs-input').val() == '') {
         XSAlert({ message: "Please type something"})
      } else {
         XSAlert({ title: 'Nice!', message: 'Your number: "'+$('#xs-input').val()+'"' })
      }
   }
})

range

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Tell me your age",
   inputType: 'range',
   inputAttributes: { min: 12, max: 99, step: 1 },
   inputValue: 12,
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      XSAlert({ title: 'Nice!', message: 'Your age is: "'+rangeNr+'"' })
   }
})

checkbox

Fire Alert!

 XSAlert({
   title: "Hi there 👋",
   message: "Accept our Terms and Conditions",
   inputType: 'checkbox',
   inputAttributes: 'checked',
   inputPlaceholder: 'I  agree!',
   closeOnOutsideClick: true,
 }).then((result) => {
   if(result == 'ok'){
      if(!isChecked) {
         XSAlert({ title: 'Oops', message: 'You should agree to our Terms!', icon: 'warning' })
      } else {
         XSAlert({ title: 'Nice!', message: 'You have agreed to our Terms!' })
      }
   }
})

• themes •

These are the CSS files of the available themes (jsdelivr CDN):

Light (Default)

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/themes/light-theme.css">

Dark

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/themes/dark-theme.css">

Red

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/themes/red-theme.css">

Blue

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/themes/blue-theme.css">

Purple

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/themes/purple-theme.css">

Brown

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/themes/brown-theme.css">

Flat

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/frankeno/xsalert@main/src/themes/flat-theme.css">

• donate •

Have you created awesome stuff with XSAlert?
Please consider supporting the development by making a donation

PayPal

• sponsors •

Want to become a sponsor? Get in touch via email

XSAlert

A nice, easy-to-use, responsive and fully customizable JavaScript Alert[jQuery required]

A nice, easy-to-use, responsive and fully customizable JavaScript Alert
[jQuery required]