Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.

Add .modal-rounded class to .model-content for adding the rounded corners.

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

Default size with fade animation.

Large size with custom animation.

Small size without animation.

Varying Modal Content (Trigger Buttons)

Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.

Sweet Alert

Sweet Alert is a beautiful replacement for JavaScript's "Alert".

Drag & Drop

You can use a simple Drag&Drop.

Drag & Drop Files Here
Please wait while uploading
Files successfully uploaded
Error uploading files

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

Tooltips with zero-length titles are never displayed.


Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Popovers whose both title and content are zero-length are never displayed.

Four Directions

PNotify is a JavaScript notification plugin, developed by SciActive. The plugin is very flexible, you can read more in the official documentation

To create a quick notifications, you can use the class .pnotify and a corresponding data-* attributes