sidebar toggle

Settings Users Components Profits New Event Tasks
Notifications
You have 2 unread notification
Congratulate Socrates Itumayfor work anniversaries
Mar 15 12:32pm
Joyce Chuajust created a new blog post
Mar 13 04:16am
Althea Cabardojust created a new blog post
Mar 13 02:56am
Adrian Moninoadded new comment on your photo
Mar 12 10:40pm
View All Notifications
Naeem Khan
[email protected]
My Profile Edit Profile Activity Logs Account Settings Sign Out

Home
Ui Elements
Modal

Modal

Modal window examples

Nifty Modal

Nifty Modal Window EffectsSome inspiration for different modal window appearances

There are many possibilities for modal overlays to appear. Here are some modern ways of showing them using CSS transitions and animations.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal Dialog

This is a modal window. You can do the following things with it:

Read:modal windows will probably tell you something important so don't forget to read what they say.
Look:a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
Close:click on the button below to close the modal.

Modal

Refresh Manage Widgets Settings

Modal windows

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

Modal contains title, content and footer

Modal title

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Modal size and colors

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

Extra large modal

Large modal

Small modal

You can add extra class to color your modal window avalible class (modal-success, modal-primary, mmodal-warning, modal-danger)

Modal success

Modal primary

Option

Refresh Manage Widgets Settings

Name	Type	Default	Description
backdrop	boolean or the string `'static'`	true	Includes a modal-backdrop element. Alternatively, specify `static`for a backdrop which doesn't close the modal on click.
keyboard	boolean	true	Closes the modal when escape key is pressed
focus	boolean	true	Puts the focus on the modal when initialized.
show	boolean	true	Shows the modal when initialized.