Bootstrap Modal

The 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.

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

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

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

<style scoped>
</style>
                                
                            

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 prop side to 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>
        <md-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, MdInput, 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,
    MdInput,
    MdTextarea,
    Container,
    Row,
    Column
  }
};
</script>

<style scoped>
</style>