Freebie: 3 Stylish and Customizable JavaScript Dialogs

It's time for freebies again! In this edition we're bringing you 3 stylish dialogs! They don't use any frameworks - it's all vanilla HTML, CSS and JavaScript (with a sprinkle of jQuery). They are responsive and should work in all modern desktop and mobile browsers.

The Dialogs

Dialogs are a good way to present a message or require an action for your users. The dialogs built into web browsers can't be styled to match your design, so you often need to roll on your own. That's why we've created the three designs included here, which can be easily customized to fit your style and used as replacements for the default alert() and prompt() dialogs.

To include one of the dialogs in your project simply copy the HTML from the example and place it anywhere on your page. Each dialog has a separate CSS stylesheet, containing all the needed styles for it to look nice. The CSS is self contained and won't interfere with the rest of your styles.

We've also included a few useful jQuery snippets for showing the modal and dismissing it by clicking/touching the dark overlay, clicking the button or hitting the escape key.

Free for Commercial Use

All of the dialogs can be downloaded from the button above. You have all rights to customize them and use them in personal and commercial projects (our license page). We hope you enjoy them!