uiv

# Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

# Example

Toggle a modal by clicking the button below. It will slide down and fade in from the top of the page.

A simple modal example with callback:

<template>
  <section class="uiv">
    <btn type="primary" @click="open = true">Launch Demo Modal</btn>
    <modal
      id="modal-demo"
      ref="modal"
      v-model="open"
      title="Modal 1"
      @hide="callback"
    >
      <h4>Text in a modal</h4>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
      <h4>Popover in a modal</h4>
      <p>
        This
        <btn
          v-popover:modal-demo="{
            title: 'Title',
            content: 'Some popover content...',
          }"
          >button</btn
        >
        should trigger a popover on click.
      </p>
      <h4>Tooltips in a modal</h4>
      <p>
        <a v-tooltip:modal-demo="'Tooltip'" role="button">This link</a>
        <span>and</span>
        <a v-tooltip:modal-demo="'Tooltip'" role="button">that link</a>
        <span>should have tooltips on hover.</span>
      </p>
      <hr />
      <h4>Overflowing text to show scroll behavior</h4>
      <p>
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
        dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
        consectetur ac, vestibulum at eros.
      </p>
      <p>
        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      </p>
      <p>
        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
        magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
        ullamcorper nulla non metus auctor fringilla.
      </p>
      <p>
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
        dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
        consectetur ac, vestibulum at eros.
      </p>
      <p>
        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      </p>
      <p>
        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
        magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
        ullamcorper nulla non metus auctor fringilla.
      </p>
      <p>
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
        dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
        consectetur ac, vestibulum at eros.
      </p>
      <p>
        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      </p>
      <p>
        Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
        magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
        ullamcorper nulla non metus auctor fringilla.
      </p>
    </modal>
  </section>
</template>
<script>
export default {
  data() {
    return {
      open: false,
    }
  },
  methods: {
    callback(msg) {
      this.$notify(`Modal dismissed with msg '${msg}'.`)
    },
  },
}
</script>

# Optional sizes

Modals have two optional sizes: lg and sm.

<template>
  <section class="uiv">
    <btn type="primary" @click="open1 = true">Large Modal</btn>
    <btn type="primary" @click="open2 = true">Small Modal</btn>
    <modal v-model="open1" title="Modal Title" size="lg">
      <p>This is a large modal.</p>
    </modal>
    <modal v-model="open2" title="Modal Title" size="sm">
      <p>This is a small modal.</p>
    </modal>
  </section>
</template>
<script>
export default {
  data() {
    return {
      open1: false,
      open2: false,
    }
  },
}
</script>

# Custom header

  • Use title slot to customize the modal title.
  • Set header prop to false to hide the modal header.
  • You can also use header slot to take full control of the modal header. Notice that this slot will override title slot since it is a completely replacement
<template>
  <section class="uiv">
    <btn type="primary" @click="open1 = true">HTML Title</btn>
    <btn type="primary" @click="open2 = true">No Header</btn>
    <modal v-model="open1">
      <span slot="title"
        ><i class="glyphicon glyphicon-heart"></i> Modal Title</span
      >
      <p>This is a modal with HTML title.</p>
    </modal>
    <modal v-model="open2" :header="false">
      <p>This is a modal with no header.</p>
    </modal>
  </section>
</template>
<script>
export default {
  data() {
    return {
      open1: false,
      open2: false,
    }
  },
}
</script>
  • Use footer slot to customize the modal footer.
  • Set footer prop to false to hide the modal footer.
<template>
  <section class="uiv">
    <btn type="primary" @click="open1 = true">Custom Footer</btn>
    <btn type="primary" @click="open2 = true">No Footer</btn>
    <modal v-model="open1" title="Modal Title">
      <p>This is a modal with custom footer.</p>
      <div slot="footer">
        <btn @click="open1 = false">Cancel</btn>
        <btn type="warning">Warning Action</btn>
        <btn type="danger">Danger Action</btn>
      </div>
    </modal>
    <modal v-model="open2" title="Modal Title" :footer="false">
      <p>This is a modal with no footer.</p>
    </modal>
  </section>
</template>
<script>
export default {
  data() {
    return {
      open1: false,
      open2: false,
    }
  },
}
</script>

# Custom button texts and types

  • Use ok-text and cancel-text to customize button texts
  • Use ok-type and cancel-type to customize button types
<template>
  <section class="uiv">
    <btn type="primary" @click="open = true">Custom Button Text and Type</btn>
    <modal
      v-model="open"
      title="Are you sure?"
      ok-text="Yes, please"
      cancel-text="No way!"
      ok-type="danger"
      cancel-type="warning"
    >
      <p>Do you really want to destroy this item?</p>
    </modal>
  </section>
</template>
<script>
export default {
  data() {
    return {
      open: false,
    }
  },
}
</script>

# Auto focus

Auto focus on footer button with data-action="auto-focus" attribute after modal open. By default it is the OK button.

# Disable backdrop

Set backdrop prop to false to disable the modal dismiss action on backdrop click.

<template>
  <section class="uiv">
    <btn type="primary" @click="open = true">Disable Backdrop</btn>
    <modal v-model="open" title="Modal Title" :backdrop="false">
      <p>This is a modal that can not close by backdrop click.</p>
    </modal>
  </section>
</template>
<script>
export default {
  data() {
    return {
      open: false,
    }
  },
}
</script>

# Disable animation

Set transition to 0 to disable modal animations.

<template>
  <section class="uiv">
    <btn type="primary" @click="open = true">Disable Animation</btn>
    <modal v-model="open" title="Modal Title" :transition="0">
      <p>This is a modal that has no transition effect.</p>
    </modal>
  </section>
</template>
<script>
export default {
  data() {
    return {
      open: false,
    }
  },
}
</script>

# Nested modals

Note that if you want modals to be real nested to each other, you have to add append-to-body prop to them. For example:

<template>
  <section class="uiv">
    <btn type="primary" @click="open1 = true">Open set of nested modals</btn>
    <!-- `append-to-body` not required here -->
    <modal ref="modal1" v-model="open1" title="Modal 1" size="lg">
      <p>This is a simple large modal.</p>
      <p>Click on the button below to open a nested modal.</p>
      <btn type="info" @click="open2 = true">Open Modal 2</btn>
      <!-- `append-to-body` required, because this is a nested modal -->
      <modal ref="modal2" v-model="open2" title="Modal 2" append-to-body>
        <p>This is a nested modal.</p>
        <btn type="info" @click="open3 = true">Open Modal 3</btn>
        <!-- `append-to-body` required, because this is a nested modal -->
        <modal
          ref="modal3"
          v-model="open3"
          title="Modal 3"
          size="sm"
          append-to-body
        >
          <p>This is another nested modal.</p>
        </modal>
      </modal>
    </modal>
  </section>
</template>
<script>
export default {
  data() {
    return {
      open1: false,
      open2: false,
      open3: false,
    }
  },
}
</script>

Otherwise, you can simply nest them logically, without any extra settings:

<template>
  <section class="uiv">
    <btn type="primary" @click="open1 = true"
      >Open set of nested modals (logically)</btn
    >
    <modal v-model="open1" title="Modal 1" size="lg">
      <p>This is a simple large modal.</p>
      <p>Click on the button below to open a nested modal.</p>
      <btn type="info" @click="open2 = true">Open Modal 2</btn>
    </modal>
    <modal v-model="open2" title="Modal 2">
      <p>This is a nested modal.</p>
      <btn type="info" @click="open3 = true">Open Modal 3</btn>
    </modal>
    <modal v-model="open3" title="Modal 3" size="sm">
      <p>This is another nested modal.</p>
    </modal>
  </section>
</template>
<script>
export default {
  data() {
    return {
      open1: false,
      open2: false,
      open3: false,
    }
  },
}
</script>

# API Reference

# Props

Name Type Default Required Description
v-model Boolean false ✔ Show / hide the modal.
title String The modal title (will be override if title slot exist).
size String The alternative modal size. Support lg / sm.
backdrop Boolean true Dismiss the modal by backdrop click.
footer Boolean true Show modal footer.
header Boolean true Show modal header.
dismiss-btn Boolean true Display the dismiss button in header.
cancel-text String Override the text of cancel button.
cancel-type String default Button type of cancel button.
ok-text String Override the text of ok button.
ok-type String primary Button type of ok button.
transition Number 150 Transition time of the modal, set to 0 to disable animation.
auto-focus Boolean false Focus on the action button that has data-action="auto-focus" attribute after modal open, by default it is the OK button.
keyboard Boolean true Close the modal after esc key pressed.
append-to-body Boolean false Append the modal element to <body>.
before-close Function Call with the msg param, return false to interrupt the modal hiding process. Promise supported since 0.34.1.

# Slots

Name Description
title Replace as the modal title.
default Replace as the modal body.
header Replace as the modal header. Note: this slot will override title slot since it is a completely replacement of header.
footer Replace as the modal footer.

# Events

Name Params Description
show Fire after modal show.
hide msg Fire after modal dismiss with message (if exist).

← Tooltip →