@voerro/vue-modal

Dynamic Modals

Generate Modal

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.

Two Buttons Three Buttons Lotsa Buttons No Buttons At All

---

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.

Generate Modal

---

Inline Modals

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)

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

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.

Show Modal One Show Modal Two Show Modal Three

---

Hiding Modals Programmatically

Hide Dynamically Generated Modal After 2 Seconds Hide Inline Modal After 2 Seconds

---

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.

Show Modal

No Header

Show Modal

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.

Show Modal