Freebie: 3 Stylish and Customizable JavaScript Dialogs

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.

Confirmation Dialog

Confirmation Dialog

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!

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

No Comments

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links