XSAlert

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


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


 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()+'"' })
         }
      }
   }
})


 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()+'"' })
      }
   }
})


 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()+'"' })
      }
   }
})


 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):

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



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



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



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



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



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



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



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


PayPal

Buy me a 🍺

• sponsors •

Want to become a sponsor? Get in touch via email

XSAlert - A nice, responsive and fully customizable Javascript Alert | Product Hunt