vue-modal
GitHub
GitHub
  • Introduction
  • Installation
  • Usage
  • Options
  • Examples

    • Basic
    • Sidebar / Drawer
    • Animations
    • Prevent body scroll
    • Prevent modal from closing
    • Customizing
      • Modal sizes
      • Scrollable content
      • Vertically centered
      • Fullscreen

Modal sizes

vue-modal is responsive out-of-the box, with a default max-width of 500px.
You can set its width using the modal-style and modal-class props.

  • Example
  • Template
  • Script
  • Style

Scrollable content

Using the modal-class prop and some additional CSS, we can have a modal that allows scroll on the modal content.

  • Example
  • Template
  • Script
  • Style

Vertically centered

Using the wrapper-class prop and some additional CSS, we can have a vertically centered modal.

  • Example
  • Template
  • Script
  • Style

Fullscreen

Sometimes we want a modal that covers the entire viewport.
We can achieve that using the wrapper-class and modal-class props.

  • Example
  • Template
  • Script
  • Style
Edit this page
Last Updated: 11/2/25, 6:15 AM
Prev
Prevent modal from closing