Vanilla JS and CSS Pop-up library

      

Library for pop-ups and toasts that look much nicer than alert().

This is a simple "vanilla" JS and CSS Pop-up library.

Beside "normal" Pop-ups you can also create Toast Pop-ups.

You don't need any special HTML, because the required HTML is generated automatically when you create a pop-up or toast.

Usage

Include the library

Normal files

<!--Include the CSS-->
<link rel="stylesheet" href="pop-up.css">

<!--Include the library-->
<script src="pop-up.js"></script>

Minified files

<!--Include the CSS-->
<link rel="stylesheet" href="pop-up.min.css">

<!--Include the library-->
<script src="pop-up.min.js"></script>

Use the predefined functions for pop-ups

popUpInfo("Message"); //Displays an information pop-up with an OK button and a close button.
popUpError("Error message"); //Displays an error pop-up with an OK button and a close button.
popUpConfirm("Question").then((result) => {
  if (result == "ok") {
	//What should happen if ok was pressed
  } else if (result == "cancel") {
    //What should happen if cancel was pressed
  }
}).catch((err) => {
  console.error(err); //What should happen if something goes wrong
}); 
/*Displays an confirm pop-up with an OK button and a cancel button.
Returns a promise which gets fulfilled when the user clicks one of the buttons.
The promise returns "ok" or "cancel".*/

Create a custom pop-up

<!--Create Pop-up-->
<script type="text/javascript">
  let p = new PopUp({
	"message" : "Lorem ipsum dolor sit amet", //Set the message in the pop-up
	"ok" : true, //Set whether there should be a OK button
	"cancel" : true, //Set whether there should be a cancel button
	"custom" : false, //Set whether there should be a custom button
	"close" : true, //Set whether there should be a close button ("x")
	"text" : "custom button text", //Set the text for your custom button
	"icon" : "📣" //Set the emoji which should be used as icon
  });

  p.create().then((result) => {
	if (result == "ok") {
	  //What should happen if ok was pressed
	} else if (result == "cancel") {
	  //What should happen if cancel was pressed
	} else if (result == "custom") {
	  //What should happen if the custom button was pressed
	}
  }).catch((err) => {
	console.error(err); //What should happen if something goes wrong
  });
</script>

Create a custom toast

<!--Create Pop-up-->
<script type="text/javascript">
  let t = new Toast({
	"message" : "Lorem ipsum dolor sit amet", //Set the message in the toast
	"ok" : true, //Set whether there should be a OK button
	"cancel" : true, //Set whether there should be a cancel button
	"custom" : false, //Set whether there should be a custom button
	"close" : true, //Set whether there should be a close button ("x")
	"text" : "custom button text", //Set the text for your custom button
	"decay": 5 //Set the decay time of the toast. If the toast shouldn't decay set it to false or leave it out
  });

  t.create().then((result) => {
	if (result == "ok") {
	  //What should happen if ok was pressed
	} else if (result == "cancel") {
	  //What should happen if cancel was pressed
	} else if (result == "custom") {
	  //What should happen if the custom button was pressed
	}
  }).catch((err) => {
	console.error(err); //What should happen if something goes wrong
  });
</script>

Customization

You can customize the content of the Pop-up via the object parameter at new PopUp({...}) or new Toast({...})

If you don't like the look of the pop-ups and toasts, you can write your own CSS, or if you only don't like the color theme, you can go to the :root Element in the CSS and change the color variables.

The colors are the same for the toasts and the pop-ups.

/* Color theme */
:root {
	--popUpBg: rgba(26, 26, 26, 0.7);
	--popUpWindowBg: #fff;
	--popUpBtnLineColor: lightgrey;
	--popUpBtnBg: #3498db;
	--popUpBtnHoverBg: #2e80b7;
	--popUpBtnTextColor: #fff;
	--popUpTextColor: #000;
	--shadow: #ccc;
}

---

Copyright © 2020 Benjamin Grau & Gregor Parzefall (MIT license) 👌