Modal

EModal is a modal window that appears momentarily on top of the main screen. It pauses the current app operation to request the user for a response.

The main screen is blocked while the modal is active. Returning to the main window requires a user action or confirmation. Demo Here

Usage

<template>
  <EBtn @click="isModalShown = !isModalShown">Open Modal</EBtn>
  <EModal v-model="isModalShown">
    <template #header> Modal title</template>
    <template #body>
      Modal content
    </template>
  </EModal>
</template>

<script setup>
  const isModalShown = ref(false);
</script>

The type of v-model is Boolean.

Props

For EModal component, the following props are available:

Prop	Type	Default	Note
teleport	Boolean	true	Enables vue teleport.
blurEffect	Boolean	true	Applies background blur.
scrollable	Boolean	false	Activates overflow-y-auto.
width	String	-	Sets the component's width.
height	String	-	Sets the component's height.
square	Boolean	false	Removes rounded corners of the element.
closeIcon	Boolean	false	Adds close icon to modal header.
maxHeight	String	-	Sets the component's max height.
modelValue	Boolean	false	Controls the visible/hidden state of modal.
disablePageScroll	Boolean	true	Disables page scrolling when modal is open.
persistent	Boolean	false	persistent EModal is not discarded when touching outside.
size	String	"md"	The EModal element has three predefined sizes: sm, md, lg.
animation	String	"component-pop-out"	The EMenu element can be animated in many ways. Defined animations here.
position	String	"center-center"	The EModal element can appear from the center-center, center-right, center-left, top-center, top-right, top-left, bottom-center, bottom-right, bottom-left, edge of the viewport.

Emits

The EModal component contains following emits.

Emit	Description
update:modelValue	Emitted when the local ref's value is mutated.

Slots

The EModal component provides following slots that enable you to customize the content.

Slot	Description
header	The slot used for the header of the modal.
body	The slot used for the modal card body.
footer	The slot used for the modal card footer.