Rate this docs

Vue Bootstrap modal

Vue Modal - Bootstrap 4 & Material Design

Vue Modal is a dialog box/popup window which can be used for lightboxes, user notifications, UI enhancements, e-commerce components and many other cases.

It's easily customized. You can manipulate size, position, and content.


Basic example

Below is a most basic Modal example with a button triggering Modal. Click the button to trigger Modal.


        <btn color="primary" @click.native="modal = true">Launch demo modal</btn>
        <modal v-if="modal" @close="modal = false">
          <modal-header>
            <modal-title>Modal title</modal-title>
          </modal-header>
          <modal-body>...</modal-body>
          <modal-footer>
            <btn color="secondary" @click.native="modal = false">Close</btn>
            <btn color="primary">Save changes</btn>
          </modal-footer>
        </modal>
      


    import { Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter, Btn } from 'mdbvue';

    export default {
      components: {
        Modal,
        ModalHeader,
        ModalTitle,
        ModalBody,
        ModalFooter,
        Btn
      },
      data() {
        return {
          modal: false
        }
      }
    }
      

Position and size

To change the position or size of the modal add one of the following props to the modal component.

Central modal

Note: Medium size is a default value, so there isn't a dedicated prop for it.

size="sm" Small Modal

size="lg" Large Modal

size="fluid" Full Width Modal

Code example:

                                      
<btn color="primary" @click.native="showModal2 = true">Small modal</btn>
<modal size="sm" v-if="showModal2" @close="showModal2 = false">
  <modal-header>
    <modal-title>Modal title</modal-title>
  </modal-header>
  <modal-body>...</modal-body>
  <modal-footer>
    <btn color="secondary" size="sm" @click.native="showModal2 = false">Close</btn>
    <btn color="primary" size="sm">Save changes</btn>
  </modal-footer>
</modal>

(... script part the same as in the basic example ...)
                                      
                                  

Side modal

Note: To make it works properly, apart from adding a prop for a position, you also need to add special side prop to the modal component.

side + position="top-right" Top Right

side + position="top-left" Top Left

side + position="bottom-right" Bottom Right

side + position="bottom-left" Bottom Left

Code example:

                                      
<!-- Side Modal Top Right -->
<btn color="primary" @click.native="showModal5 = true">Top right</btn>
<modal side position="top-right" v-if="showModal5" @close="showModal5 = false">
  <modal-header>
    <modal-title>Modal title</modal-title>
  </modal-header>
  <modal-body>...</modal-body>
  <modal-footer>
    <btn color="secondary" @click.native="showModal5 = false">Close</btn>
    <btn color="primary">Save changes</btn>
  </modal-footer>
</modal>

(... script part the same as in the basic example ...)
                                      
                                  

Fluid modal

Note: As in the previous example - to make it works properly, apart from adding a prop for a position, you also need to add special prop fullHeight to modal component.

fullHeight + position="right" Right

fullHeight + position="left" Left

fullHeight + position="bottom" Bottom

fullHeight + position="top" Top

Code example:

                                      
<!-- Full Height Modal Right -->
<btn color="primary" @click.native="showModal7 = true">Right</btn>
<modal fullHeight position="right" v-if="showModal7" @close="showModal7 = false">
  <modal-header>
    <modal-title>Modal title</modal-title>
  </modal-header>
  <modal-body>...</modal-body>
  <modal-footer>
    <btn color="secondary" @click.native="showModal7 = false">Close</btn>
    <btn color="primary">Save changes</btn>
  </modal-footer>
</modal>

(... script part the same as in the basic example ...)
                                      
                                  

Frame modal

Note: As in the previous examples - to make it works properly, apart from adding a prop for a position, you also need to add special prop frame to modal component.

frame + position="bottom" Bottom

frame + position="top" Top

Code example:

                                      
<!-- Frame Modal Bottom -->
<btn color="primary" @click.native="showModal9 = true">Bottom</btn>
<modal frame position="bottom" v-if="showModal9" @close="showModal9 = false">
  <modal-body class="text-center">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
    <btn color="secondary" @click.native="showModal9 = false">Close</btn>
    <btn color="primary">Save changes</btn>
  </modal-body>
</modal>

(... script part the same as in the basic example ...)
                                      
                                  

Remove backdrop

To remove backdrop add removeBackdrop prop to the modal component


<btn color="primary" @click.native="showModal11 = true">Launch modal</btn>
<modal removeBackdrop side position="top-right" v-if="showModal11" @close="showModal11 = false">
  <modal-header>
    <modal-title>Modal title</modal-title>
  </modal-header>
  <modal-body>...</modal-body>
  <modal-footer>
    <btn color="secondary" @click.native="showModal11 = false">Close</btn>
    <btn color="primary">Save changes</btn>
  </modal-footer>
</modal>

(... script part the same as in the basic example ...)
    

Scrolling long content

When modal become too long for the user’s viewport or device, it scrolls independently of the page itself. Try the demo below.


Vertically centered

Add centered prop to modal to vertically center the modal.


Tooltips and popovers

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

Note: Remember to initialize tooltips/popovers. You can find more information in the Tooltips and popovers documentation.


<btn color="primary" @click.native="showModal14 = true">Launch modal</btn>
<modal v-if="showModal14" @close="showModal14 = false">
  <modal-header>
    <modal-title>Modal title</modal-title>
  </modal-header>
  <modal-body>
    <modal-title>Popover in modal</modal-title>
    <div>This         
      <popover trigger="click" :options="{placement: 'right'}">
        <div class="popover">
          <div class="popover-header">
            Popover title
          </div>
          <div class="popover-body">
            Popover body content is set in this attribute.
          </div>
        </div>
        <btn slot="reference" color="default">
          Button
        </btn>
      </popover>
      triggers a popover on click.
    </div>
    <hr/>
    <modal-title>Tooltips in a modal</modal-title>
    <tooltip trigger="hover" :options="{placement: 'top'}">
      <div class="tooltip">
        Tooltip
      </div>
      <a slot="reference">
        This link
      </a>
    </tooltip>
    and
    <tooltip trigger="hover" :options="{placement: 'top'}">
      <div class="tooltip">
        Tooltip
      </div>
      <a slot="reference">
        that link
      </a>
    </tooltip>
    have tooltips on hover.
  </modal-body>
  <modal-footer>
    <btn color="secondary" @click.native="showModal14 = false">Close</btn>
    <btn color="primary">Save changes</btn>
  </modal-footer>
</modal>

(... script part the same as in the basic example ...)
    

Using the grid

Utilize the Bootstrap grid system within a modal by nesting container fluid within the modal-body. Then, use the normal grid system classes as you would anywhere else.


<btn color="primary" @click.native="showModal15 = true">Launch modal</btn>
<modal v-if="showModal15" @close="showModal15 = false">
  <modal-header>
    <modal-title>Modal title</modal-title>
  </modal-header>
  <modal-body>
    <container fluid class="text-white">
      <row>
        <column md="4" class="bg-info">.col-md-4</column>
        <column md="4" class="ml-auto bg-info">.col-md-4 .ml-auto</column>
      </row>
      <br />
      <row>
        <column md="3" class="ml-auto bg-info">.col-md-3 .ml-auto</column>
        <column md="2" class="ml-auto bg-info">.col-md-2 .ml-auto</column>
      </row>
      <row>
        <column md="6" class="ml-5 bg-info">.col-md-6 .ml-5</column>
      </row>
      <br />
      <row>
        <column sm="9" class="bg-info">
          Level 1: .col-sm-9
          <row>
            <column sm="6" class="bg-info">
              Level 2: .col-8 .col-sm-6
            </column>
            <column sm="6" class="bg-info">
              Level 2: .col-4 .col-sm-6
            </column>
          </row>
        </column>
      </row>
    </container>
  </modal-body>
  <modal-footer>
    <btn color="secondary" @click.native="showModal15 = false">Close</btn>
    <btn color="primary">Save changes</btn>
  </modal-footer>
</modal>

(... script part the same as in the basic example ...)
          

Varying modal content

                                      
<template>
  <container class="mt-5">
    <btn color="primary" @click.native="showModal16 = true">Open modal for {{mailAddress}}</btn>
    <modal v-if="showModal16" @close="showModal16 = false">
      <modal-header>
        <modal-title>New message to {{mailAddress}}</modal-title>
      </modal-header>
      <modal-body>
        <mdb-input type="text" :label="mailAddress"/>
        <md-textarea label="Message"/>
      </modal-body>
      <modal-footer>
        <btn color="secondary" @click.native="showModal16 = false">Close</btn>
        <btn color="primary">Send message</btn>
      </modal-footer>
    </modal>
  </container>
</template>

<script>
import { Btn, Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter, Tooltip, Popover, mdbInput, MdTextarea, Container, Row, Column } from 'mdbvue';

export default {
  name: 'ModalPage',
  data() {
    return {
      showModal16: false,
      mailAddress: '@mdo'
    };
  },
  components: {
    Btn,
    Modal,
    ModalHeader,
    ModalTitle,
    ModalBody,
    ModalFooter,
    Tooltip,
    Popover,
    mdbInput,
    MdTextarea,
    Container,
    Row,
    Column
  }
};
</script>

<style scoped>
</style>
                                      
                                  

Vue Modal - API

In this section you will find advanced information about the Modal component. Which modules are required? What are the customization possibilities of modals? Finally - what events and methods can be used within?


Modal components import statement

In order to use the component make sure you have imported it properly.


            import { Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbvue';
        

Modal

The table below shows the configuration option props of the Modal component.

Name Type Default Description
tag String div Allows to substitute native element's tag
side Boolean false Makes modal a side-positioned one
position String -- Determinates modal's position relative to the browser window
centered Boolean -- Center modal vertically and horizonally
fullHeight Boolean false Makes the modal take full height from a specified side
frame Boolean false Turns modal into a frame-type one
removeBackdrop Boolean false Removes the dark overlay from the background, along its functionality
cascade Boolean false Allows for a cascading nature of a modal
avatar Boolean false Gives modal styling fitting perfectly with avatar-based heading
tabs Boolean false Provides styles necessary for having a tab navigation in modal's header
success Boolean false Styles modal in a success-notification fashion
info Boolean false Styles modal in a info-notification fashion
warning Boolean false Styles modal in a warning-notification fashion
warning Boolean false Styles modal in a warning-notification fashion
elegant Boolean false It helps to style modal so it is slick and elegant
dark Boolean false Determines whether style of a modal should not have a dark nature
bgSrc String null Dark style necessitate having a picture background, but the feature is for all the modals, really

ModalHeader

Name Type Default Description
tag String div Allows to substitute native element's tag
close Boolean true Turning it to false gets rid of the close "x" icon in the right top conrner
color String -- Determines color of the header
textColor String -- Helps to set font color

ModalBody

Name Type Default
tag String div Allows to substitute native element's tag
Name Type Default Description
tag String div Allows to substitute native element's tag
start Boolean false Makes the ModalHeader contents align to the left
end Boolean false Makes the ModalHeader contents align to the right
closeAriaLabel Boolean false Makes the ModalHeader contents align with space between them
titleClasses Boolean false Makes the ModalHeader contents align with space around them

Modal styles

By using our predefined modal styles you can add some emotional weight to your information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.

All it takes is adding a success, info, warning or a damger prop!

The change shall effect the following components within the modal:

  1. ModalHeader

  2. Bange

  3. mdnIcon

Success modal

Simply add success prop to a modal.

Code example:


      <modal success>
          <modal-header>
            <modal-title>Success Modal</modal-title>
            </modal-header>
            <modal-body  class="text-center">
              <fa icon="check" size="4x" class="mb-3 animated rotateIn"/>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam
                    blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat.
                    Esse ratione fuga, enim, ab officiis totam.
              </p>
            </modal-body>
            <modal-footer center>
              <btn color="primary">Get it now <fa icon="diamond" class="ml-1" color="white"/></btn>
              <btn outline="primary">No, thanks</btn>
            </modal-footer>
          </modal>
  

Info modal

Add info prop to a modal.

Code example:


                <modal info>
                  <modal-header>
                    <modal-title>Info Modal</modal-title>
                  </modal-header>
                  <modal-body>
                    <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="modal" class="img-fluid"/>
                    <p class="text-center">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.
                    </p>
                  </modal-body>
                  <modal-footer center>
                    <btn color="primary">Get it now <fa icon="diamond" class="ml-1" color="white"/></btn>
                    <btn outline="primary">No, thanks</btn>
                  </modal-footer>
                </modal>
            

Danger modal

Add danger prop to a modal.

Code example:


                <modal danger>
                  <modal-header>
                    <modal-title>Danger Modal</modal-title>
                  </modal-header>
                  <modal-body>
                    <row>
                      <column col="3" class="text-center"><fa icon="shopping-cart" size="4x"/></column>
                      <column col="9">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
                        <h2><badge>v52gs1</badge></h2>
                      </column>
                    </row>
                  </modal-body>
                  <modal-footer center>
                    <btn color="danger">Get it now <fa icon="diamond" class="ml-1" color="white"/></btn>
                    <btn outline="danger">No, thanks</btn>
                  </modal-footer>
                </modal>
            

Warning modal

Add warning prop to a modal.

Code example:


                <modal warning>
                    <modal-header>
                      <modal-title>Warning Modal</modal-title>
                    </modal-header>
                    <modal-body>
                      <row>
                        <column col="3" class="text-center">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle mb-2">
                          <p class="title mb-0">Jane</p>
                          <p class="text-muted " style="font-size: 13px">Consultant</p>
                        </column>
                        <column col="9">
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
                          <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
                        </column>
                      </row>
                    </modal-body>
                    <modal-footer center>
                      <btn color="warning">Get it now <fa icon="diamond" class="ml-1" color="white"/></btn>
                      <btn outline="warning">No, thanks</btn>
                    </modal-footer>
                  </modal>
            

Events

Modals emit events as they come and go. Prociding custom event handlers on these hooks helps to nicely fit them with the app flow. Check it out:

Show event

This event is fired just before the modal is open.


            <btn rounded color="default" @click.native="show = true">launch success modal <fa icon="eye" class="ml-1"/></btn>
            <modal v-if="show" @show="handleShow" @close="show = false" success>
              <modal-header>
                <modal-title>Success Modal</modal-title>
                </modal-header>
                <modal-body  class="text-center">
                  <fa icon="check" size="4x" class="mb-3 animated rotateIn"/>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam
                        blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat.
                        Esse ratione fuga, enim, ab officiis totam.
                  </p>
                </modal-body>
                <modal-footer center>
                  <btn color="primary" @click.native="show = false">Get it now <fa icon="diamond" class="ml-1" color="white"/></btn>
                  <btn outline="primary" @click.native="show = false">No, thanks</btn>
                </modal-footer>
              </modal>
        

            import { Fa, Btn, Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter } from 'mdbvue';
            export default {
              name:'ModalEventsPage',
              components: {
                Fa,
                Btn,
                Modal,
                ModalHeader,
                ModalTitle,
                ModalBody,
                ModalFooter
              },
              data() {
                return {
                  show: false,

                };
              },
              methods: {
                handleShow() {
                  alert('Hello World!');
                }
              }
            };
          

Shown event

This event is fired after the modal is shown.


                  <btn rounded color="default" @click.native="shown = true">launch info modal <fa icon="eye" class="ml-1"/></btn>
                  <modal v-if="shown" @shown="handleShown" @close="shown = false" info>
                    <modal-header>
                      <modal-title>Info Modal</modal-title>
                    </modal-header>
                    <modal-body>
                      <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="modal" class="img-fluid"/>
                      <p class="text-center">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.
                      </p>
                    </modal-body>
                    <modal-footer center>
                      <btn color="primary" @click.native="shown = false">Get it now <fa icon="diamond" class="ml-1" color="white"/></btn>
                      <btn outline="primary" @click.native="shown = false">No, thanks</btn>
                    </modal-footer>
                  </modal>
              

                  import { Fa, Btn, Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter } from 'mdbvue';
                  export default {
                    name:'ModalEventsPage',
                    components: {
                      Fa,
                      Btn,
                      Modal,
                      ModalHeader,
                      ModalTitle,
                      ModalBody,
                      ModalFooter
                    },
                    data() {
                      return {
                        shown: false,
                      };
                    },
                    methods: {
                      handleShown() {
                        alert('Hello World!');
                      }
                    }
                  };
                

Hide event

This event is fired just before the modal is hidden.


                  <btn rounded color="default" @click.native="hide = true">launch danger modal <fa icon="eye" class="ml-1"/></btn>
                  <modal v-if="hide" @hide="handleHide" @close="hide = false" danger>
                    <modal-header>
                      <modal-title>Danger Modal</modal-title>
                    </modal-header>
                    <modal-body>
                      <row>
                        <column col="3" class="text-center"><fa icon="shopping-cart" size="4x"/></column>
                        <column col="9">
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
                          <h2><badge>v52gs1</badge></h2>
                        </column>
                      </row>
                    </modal-body>
                    <modal-footer center>
                      <btn color="primary" @click.native="hide = false">Get it now <fa icon="diamond" class="ml-1" color="white"/></btn>
                      <btn outline="primary" @click.native="hide = false">No, thanks</btn>
                    </modal-footer>
                  </modal>
              

                  import { Fa, Btn, Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter, Column, Row, Badge } from 'mdbvue';
                  export default {
                    name:'ModalEventsPage',
                    components: {
                      Fa,
                      Btn,
                      Modal,
                      ModalHeader,
                      ModalTitle,
                      ModalBody,
                      ModalFooter,
                      Column,
                      Row,
                      Badge
                    },
                    data() {
                      return {
                        shown: false,
                      };
                    },
                    methods: {
                      handleHide() {
                        alert('Hello World!');
                      }
                    }
                  };
                

Hidden event

This event is fired after the modal is closed.


              <btn rounded color="default" @click.native="hidden=true">launch warning modal <fa icon="eye" class="ml-1"/></btn>
              <modal v-if="hidden" @hidden="handleHidden" @close="hidden = false" warning>
                <modal-header>
                  <modal-title>Warning Modal</modal-title>
                </modal-header>
                <modal-body>
                  <row>
                    <column col="3" class="text-center">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle mb-2">
                            <p class="title mb-0">Jane</p>
                            <p class="text-muted " style="font-size: 13px">Consultant</p>
                    </column>
                    <column col="9">
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
                      <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
                    </column>
                  </row>
                </modal-body>
                <modal-footer center>
                  <btn color="primary" @click.native="hidden = false">Get it now <fa icon="diamond" class="ml-1" color="white"/></btn>
                  <btn outline="primary" @click.native="hidden = false">No, thanks</btn>
                </modal-footer>
              </modal>
          

              import { Fa, Btn, Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter, Column, Row, Badge } from 'mdbvue';
              export default {
                name:'ModalEventsPage',
                components: {
                  Fa,
                  Btn,
                  Modal,
                  ModalHeader,
                  ModalTitle,
                  ModalBody,
                  ModalFooter,
                  Column,
                  Row,
                  Badge
                },
                data() {
                  return {
                    shown: false,
                  };
                },
                methods: {
                  handleHidden() {
                    alert('Hello World!');
                  }
                }
              };