@voerro/vue-modal

A flexible & responsive modal component for Vue.js 2 by Voerro

Dynamic Modals

Modal Title

Modal Body

Dismissible

Header

Customize Buttons

Modals can have as many buttons as you need, each with a unique handler/action. A button without a handler simply closes the modal.

Loading Modal's Body via AJAX

This works as a regular modal, except you need to provide a URL to fetch the content instead of a body.

Modal Body URL

Inline Modals

Inline Title

This body, as well as the title, are stored directly within the HTML of your page.

You can put something else in the footer if you don't need the buttons (or provide the buttons via options like with dynamically generated modals)

Inline 2

This is a different inline modal with a different id. Don't include the footer slot if you don't need it.

Inline 3

The buttons for this modal are generated dynamically.

You can also define multiple modals inline with Vue slots. Each modal should have a unique id. Open this page's source code and find the two <modal> blocks defining these modals if you want to see how it works.

Hiding Modals Programmatically

Options

Undismissible Modals. An undismissible modal can not be dismissed by pressing on the close button or on the overlay outside the modal. An action (a button click) is required to close the modal.

No Header

Prevent Default Button's Action. By default the active modal will be closed after you press on any of the buttons (even if that button has a handler). Luckily, you can prevent that.