logo
  • 4
    • 4 New Messages
    • icon
      Riot Zeast
      Hello, You there?
      8 minutes ago
    • icon
      John Kerry
      Can we Meet ?
      45 minutes ago
    • icon
      Jenny Kerry
      Dont forgot to call...
      An hour ago
    • icon
      Ronny
      Hey! sup Dude?
      3 Hours ago
    • View all
  • 7
    • You have 7 notifications
      • after a long time Just Now
      • Jef's Birthday today Few seconds ago
      • out of space 8 minutes ago
      • New friend request An hour ago
      • On sale 2 products 3 Hours ago
      • Lee Shared your photo Yesterday
      • David liked your photo 2 July 2014
    • View all
  • riot
    Riot
    • User Image

      Riot Zeast

    • My Profile
    • Account Settings
    • Lock
      Logout
  • Dashboard
  • Builders
    • Form Builder
    • Form Builder 2
    • Button Builder
    • Page Builder
  • Forms
    • Form Examples
    • Form Editors
    • Form Editors 2
    • Form Validation
    • Form Elements
    • Drop Downs
    • Radio and Checkbox
    • Ratings
    • Form Layouts
    • Form Wizards
    • Accordion Wizards
    • Date pickers
    • Advanced Date Pickers
  • UI Features
    • Animated Icons
    • Buttons
    • Advanced Buttons
    • Tabs and Accordions
    • Panels
    • Font Icons
    • Color Picker Slider
    • Grid Layout
    • Carousel
    • Advanced Modals
    • Tags Input
    • Nestable List
    • Sortable List
    • Treeview and jsTree
    • Toastr Notifications
    • Sweet Alert
    • Notifications
    • Session Timeout
    • Draggable Portlets
  • UI Components
    • General Components
    • Pickers
    • X-editable
    • Timeline
    • Transitions
    • Sliders
    • Circles Sliders
  • Data Tables
    • Simple tables
    • Advanced Data Tables
    • Advanced Data Tables 2
    • Editable Data Tables
    • Responsive Data Tables
  • Charts
    • Flot Charts
    • Pie Charts
    • Animated Charts
    • JS Charts
    • Sparkline Charts
  • 7 Calendar
  • Email
    • Inbox
    • Compose
    • Single Mail
  • 10 Tasks
  • Gallery
    • Gallery
    • Masonry Gallery
    • Dropzone
    • Image Cropping
    • Multiple File Upload
    • Image Magnifier
  • Users
    • Users List
    • Add New User
    • View Profile
    • Deleted Users
  • Maps
    • Google Maps
    • Vector Maps
    • Advanced Maps
  • Blog
    • Blog Category List
    • Blog List
    • Add New Blog
  • News
    • News
    • News Details
  • Pages
    • Lockscreen
    • Invoice
    • Login
    • Login 2
    • Register
    • Register 2
    • 404 Error
    • 500 Error
    • Blank Page

Advanced Modals

  1. Dashboard
  2. UI features
  3. Advanced Modals

Advanced customized Modals

Fade and Slide effects

Simple modal with title and footer


Flip and Rotate effects

You can customize the size of your modal. Just add the class modal-lg .

Other effects

For fullwidth modal, add the class modal-full .


Color variation

Like in a normal page, you can add class to make your modal responsive, col-md-4 for example.

Fade in & Scale

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.

Slide in (right)

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.

Slide in (bottom)

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.

Pulldown

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.

Floating

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.

Stretch Left

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.

Pull Up

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.

3D Expand Open

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.

3D Big Entrance

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.

3D Expand Up

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.

Stretch Right

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.

3D tossing

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.

3D Bounce

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.

3D Pulse

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.

Primary Modal

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.

Info Modal

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.

Success Modal

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.

Default Modal

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.

Warning Modal

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.

Danger Modal

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.

Extended Modals

Responsive View Demo
Stackable View Demo
Ajax View Demo
Static Background with Animation View Demo
Full Width View Demo
Long Modals View Demo

Responsive

Some More data

Some More data

Stack One

One fine body…

One fine body…

One fine body…

Launch modal

Stack two

One fine body…

One fine body…

Launch modal

Stack3

One fine body…

ajax-modal

  • Tab 1
  • Tab 2

This modal was loaded in via ajax

This is some other tab content

Would you like to continue with some arbitrary task?

Full Width

This modal will resize itself to the same dimensions as the container class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin ipsum ac ante fermentum suscipit. In ac augue non purus accumsan lobortis id sed nibh. Nunc egestas hendrerit ipsum, et porttitor augue volutpat non. Aliquam erat volutpat. Vestibulum scelerisque lobortis pulvinar. Aenean hendrerit risus neque, eget tincidunt leo. Vestibulum est tortor, commodo nec cursus nec, vestibulum vel nibh. Morbi elit magna, ornare placerat euismod semper, dignissim vel odio. Phasellus elementum quam eu ipsum euismod pretium.

A Fairly Long Modal

Not So Long Modal image