Rate this docs

Vue Bootstrap Modal

Vue Modal - Bootstrap 4 & Material Design

Vue Bootstrap 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.

Important

When the 'hidden' event is triggered, the modal is already out of the DOM tree - the event must be listened for from somewhere else, say, from parent.


              <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="Jane - Consultant" 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!');
                  }
                }
              };
            

React Modals - examples & customization

Quickly get a project started with any of our examples.


Modal Cookies



        <mdb-btn color="default" @click="cookies=true" class="mb-3" size="sm">launch modal</mdb-btn>
        <mdb-modal v-if="cookies" removeBackdrop fullHeight position="bottom">
          <mdb-modal-body>
            <mdb-row center class="align-items-center">
              <p class="pr-2 mb-0">We use cookies to improve your website experience</p>
              <mdb-btn color="primary" @click="cookies = false" icon="book" iconClass="ml-1" iconRight>Learn more</mdb-btn>
              <mdb-btn outline="primary" @click="cookies = false">Ok, thanks</mdb-btn>
            </mdb-row>
          </mdb-modal-body>
        </mdb-modal>
      

          import { mdbRow, mdbBtn, mdbModal, mdbModalBody } from 'mdbvue';

          export default {
            name: 'ModalExamplesPage',
            components: {
              mdbRow,
              mdbBtn,
              mdbModal,
              mdbModalBody,
            },
            data() {
              return {
                cookies: false,
              }
            };
          }
        

Modal Coupon



            <mdb-btn color="default" class="mb-3" @click="coupon=true">launch modal</mdb-btn>
            <mdb-modal v-if="coupon" @close="coupon = false" removeBackdrop fullHeight position="top" success>
              <mdb-modal-body>
                <mdb-row center class="align-items-center" >
                  <h2><mdb-badge>v52gs1</mdb-badge></h2>
                  <p class="pt-3 mx-4">We have a gift for you! Use this code to get a
                    <strong>10% discount</strong>.</p>
                  <mdb-btn color="success" @click="coupon = false" icon="book" iconClass="ml-1" iconColor="white" iconRight>Get it</mdb-btn>
                  <mdb-btn outline="success" @click="coupon = false">No, thanks</mdb-btn>
                </mdb-row>
              </mdb-modal-body>
            </mdb-modal>
        

            import { mdbRow, mdbBtn, mdbModal, mdbModalBody, mdbBadge } from 'mdbvue';

            export default {
              name: 'ModalExamplesPage',
              components: {
                mdbRow,
                mdbBtn,
                mdbModal,
                mdbModalBody,
                mdbBadge
              },
              data() {
                return {
                  coupon: false,
                }
              };
            }
          

Modal Discount



                <mdb-btn color="default" class="mb-3" @click="discount=true">launch modal</mdb-btn>
                <mdb-modal v-if="discount" @close="discount = false" removeBackdrop side position="bottom-right" danger>
                  <mdb-modal-header>
                    <p class="heading">Discount offer:
                      <strong>10% off</strong>
                    </p>
                  </mdb-modal-header>
                  <mdb-modal-body>
                    <mdb-row>
                      <mdb-column col="3">
                        <mdb-icon icon="gift" size="4x"/>
                      </mdb-column>
                      <mdb-column col="9">
                        <p>
                          Sharing is caring. Therefore, from time to time we like to give our visitors small gifts. Today is one of those days.</p>
                        <p>
                          <strong>Copy the following code and use it at the checkout. It's valid for
                            <u>one day</u>.</strong>
                        </p>
                        <h2>
                          <badge>v52gs1</badge>
                        </h2>
                      </mdb-column>
                    </mdb-row>
                  </mdb-modal-body>
                  <mdb-modal-footer center>
                    <mdb-btn color="danger" tag="a" href="https://mdbootstrap.com/product/vue-bootstrap-pro/" target="_blank" icon="diamond" iconClass="ml-1" iconColor="white" iconRight>Get it</mdb-btn>
                    <mdb-btn outline="danger" @click="discount = false">No, thanks</mdb-btn>
                  </mdb-modal-footer>
                </mdb-modal>
            

                import { mdbRow, mdbColumn, mdbIcon, mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter, mdbBadge } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbRow,
                    mdbColumn,
                    mdbIcon,
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                    mdbBadge
                  },
                  data() {
                    return {
                      discount: false,
                    }
                  };
                }
              

Modal Related Content




                <mdb-btn color="default" class="mb-3" @click="related=true">launch modal</mdb-btn>
                <mdb-modal v-if="related" @close="related = false" removeBackdrop side position="bottom-right" info>
                  <mdb-modal-header>
                    <p class="heading">Related article</p>
                  </mdb-modal-header>
                  <mdb-modal-body>
                    <mdb-row>
                      <mdb-column col="5">
                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(55).jpg" class="img-fluid" alt="Baloon floating in Mind-Space">
                      </mdb-column>
                      <mdb-column col="7">
                        <p><strong>My travel to paradise</strong></p>
                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit [...]</p>
                        <mdb-btn color="primary">Read more</mdb-btn>
                      </mdb-column>
                    </mdb-row>
                  </mdb-modal-body>
                </mdb-modal>
            

                import { mdbRow, mdbColumn, mdbBtn, mdbModal, mdbModalHeader, mdbModalBody } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbRow,
                    mdbColumn,
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody
                  },
                  data() {
                    return {
                      related: false,
                    }
                  };
                }
              

Modal Abandoned Cart


                <mdb-btn color="default" class="mb-3" @click="abandoned=true">launch modal</mdb-btn>
                <mdb-modal v-if="abandoned" @close="abandoned = false" removeBackdrop side position="bottom-right" info>
                  <mdb-modal-header>
                    <p class="heading">Product in the cart</p>
                  </mdb-modal-header>
                  <mdb-modal-body>
                    <mdb-row>
                      <mdb-column col="3">
                        <p class="text-center mt-3"><mdb-icon icon="shopping-cart" size="4x"/></p>
                      </mdb-column>
                      <mdb-column col="9">
                        <p>Do you need more time to make a purchase decision?</p>
                        <p>No pressure, your product will be waiting for you in the cart.</p>
                      </mdb-column>
                    </mdb-row>
                  </mdb-modal-body>
                  <mdb-modal-footer center>
                    <mdb-btn tag="a" color="primary">Go to cart</mdb-btn>
                    <mdb-btn tag="a" outline="primary" @click="abandoned=false">Cancel</mdb-btn>
                  </mdb-modal-footer>
                </mdb-modal>
            

                import { mdbRow, mdbColumn, mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbRow,
                    mdbColumn,
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter
                  },
                  data() {
                    return {
                      abandoned: false,
                    }
                  };
                }
              

Modal Confirm Delete


                <mdb-btn color="default" class="mb-3" @click="confirm=true">lanuch modal</mdb-btn>
                <mdb-modal v-if="confirm" @close="confirm = false" size="sm" class="text-center" danger>
                  <mdb-modal-header center :close="false">
                    <p class="heading">Are you sure?</p>
                  </mdb-modal-header>
                  <mdb-modal-body>
                     <mdb-icon icon="times" size="4x" class="animated rotateIn"/>
                  </mdb-modal-body>
                  <mdb-modal-footer center>
                    <mdb-btn outline="danger" @click="confirm=false">Yes</mdb-btn>
                    <mdb-btn color="danger" @click="confirm=false">No</mdb-btn>
                  </mdb-modal-footer>
                </mdb-modal>
            

                import { mdbRow, mdbColumn, mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbRow,
                    mdbColumn,
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter
                  },
                  data() {
                    return {
                      close: false,
                    }
                  };
                }
              

Modal Poll


                <mdb-btn color="default" class="mb-3 mr-5" @click="poll=true">Launch modal</mdb-btn>
                <mdb-modal v-if="poll" @close="poll = false" fullHeight info removeBackdrop>
                  <mdb-modal-header center :close="false">
                    <p class="heading lead">Feedback request</p>
                  </mdb-modal-header>
                  <mdb-modal-body>
                    <div class="text-center">
                      <mdb-icon icon="file-text-o" size="4x" class="mb-3 animated rotateIn"/>
                      <p><strong>Your opinion matters</strong></p>
                      <p>Have some ideas how to improve our product?
                      <strong>Give us your feedback.</strong></p>
                    </div>
                    <hr/>
                    <p class="text-center">
                      <strong>Your rating</strong>
                    </p>

                    <mdb-input type="radio"
                      id="option1-1"
                      name="option1"
                      value="option1"
                      label="Very good"
                    />
                    <mdb-input type="radio"
                      id="option1-2"
                      name="option1"
                      value="option2"
                      label="Good"
                    />
                    <mdb-input type="radio"
                      id="option1-3"
                      name="option1"
                      value="option3"
                      label="Mediocre"
                    />
                    <mdb-input type="radio"
                      id="option1-4"
                      name="option1"
                      value="option4"
                      label="Bad"
                    />
                    <mdb-input type="radio"
                      id="option1-5"
                      name="option1"
                      value="option5"
                      label="Very bad"
                    />
                    <p class="text-center">
                      <strong>What could we improve?</strong>
                    </p>
                    <mdb-textarea :rows="3" label="Your message"/>
                  </mdb-modal-body>
                  <mdb-modal-footer center>
                    <mdb-btn color="primary" @click="poll=false" icon="paper-plane" iconRight iconClass="ml-1 white-text">Send</mdb-btn>
                    <mdb-btn outline="primary" @click="poll=false">Cancel</mdb-btn>
                  </mdb-modal-footer>
                </mdb-modal>
            

                import { mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter, mdbInput, mdbTextarea } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                    mdbInput,
                    mdbTextarea
                  },
                  data() {
                    return {
                      poll: false,
                    }
                  };
                }
              

Modal Cart



                  <mdb-btn color="default" class="mb-3 mr-5" @click="cart=true">launch modal</mdb-btn>
                  <mdb-modal v-if="cart" @close="cart = false" class="text-center">
                    <mdb-modal-header>
                      <h4 class="modal-title" id="myModalLabel">Your cart</h4>
                    </mdb-modal-header>
                    <mdb-modal-body>
                       <mdb-tbl hover>
                         <mdb-tbl-head>
                           <tr>
                             <th>#</th>
                             <th>Product name</th>
                             <th>Price</th>
                             <th>Remove</th>
                            </tr>
                          </mdb-tbl-head>
                          <tbl-body>
                            <tr>
                              <th scope="row">1</th>
                              <td>Product 1</td>
                              <td>100$</td>
                              <td><a><mdb-icon icon="remove"/></a></td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td>Product 2</td>
                              <td>100$</td>
                              <td><a><mdb-icon icon="remove"/></a></td>
                            </tr>
                            <tr>
                              <th scope="row">3</th>
                              <td>Product 3</td>
                              <td>100$</td>
                              <td><a><mdb-icon icon="remove"/></a></td>
                            </tr>
                            <tr>
                              <th scope="row">4</th>
                              <td>Product 4</td>
                              <td>100$</td>
                              <td><a><mdb-icon icon="remove"/></a></td>
                            </tr>
                            <tr class="total">
                              <th scope="row">5</th>
                              <td>Total</td>
                              <td>400$</td>
                              <td></td>
                            </tr>
                          </tbl-body>
                       </mdb-tbl>
                    </mdb-modal-body>
                    <mdb-modal-footer>
                      <mdb-btn outline="primary" @click="cart=false">Close</mdb-btn>
                      <mdb-btn color="primary" @click="cart=false">Checkout</mdb-btn>
                    </mdb-modal-footer>
                  </mdb-modal>

              

                  import { mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter, mdbTable, mdbTblHead, mdbTblBody } from 'mdbvue';

                  export default {
                    name: 'ModalExamplesPage',
                    components: {
                      mdbBtn,
                      mdbIcon,
                      mdbModal,
                      mdbModalHeader,
                      mdbModalBody,
                      mdbModalFooter,
                      mdbTable,
                      mdbTblHead,
                      mdbTblBody
                    },
                    data() {
                      return {
                        cart: false,
                      }
                    };
                  }
                

Modal Push



                <mdb-btn color="default" class="mb-3" @click="push=true">launch modal</mdb-btn>
                <mdb-modal v-if="push" @close="push = false" class="text-center" info>
                  <mdb-modal-header center :close="false">
                    <p class="heading">Be always up to date</p>
                  </mdb-modal-header>
                  <mdb-modal-body>
                    <mdb-icon icon="bell" size="4x" class="animated rotateIn mb-4"/>
                    <p>Do you want to receive the push notification about the newest posts?</p>
                  </mdb-modal-body>
                  <mdb-modal-footer center>
                    <mdb-btn outline="primary" @click="push=false" tag="a" href="https://mdbootstrap.com/docs/vue/newsletter/" target="_blank">Yes</mdb-btn>
                    <mdb-btn color="primary" @click="push=false">No</mdb-btn>
                  </mdb-modal-footer>
                </mdb-modal>

            

                import { mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter  } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                  },
                  data() {
                    return {
                      push: false,
                    }
                  };
                }
              

Modal YouTube



              <mdb-btn color="primary" @click.native="ytmodal=true">Launch modal</mdb-btn>
              <mdb-modal v-if="ytmodal" @close="ytmodal=false">
                <mdb-modal-body class="p-0">
                  <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe>
                  </div>
                </mdb-modal-body>
                <mdb-modal-footer center>
                  <span class="mr-4">Spread the word!</span>
                  <mdb-btn tag="a" floating size="sm" class="btn-fb">
                    <mdb-icon icon="facebook"/>
                  </mdb-btn>
                  <mdb-btn tag="a" floating size="sm" class="btn-tw">
                    <mdb-icon icon="twitter"/>
                  </mdb-btn>
                  <mdb-btn tag="a" floating size="sm" class="btn-gplus">
                    <mdb-icon icon="google-plus"/>
                  </mdb-btn>
                  <mdb-btn tag="a" floating size="sm" class="btn-ins">
                    <mdb-icon icon="linkedin"/>
                  </mdb-btn>
                  <mdb-btn outline="primary" rounded size="md" @click.native="ytmodal=false" class="ml-4">close</mdb-btn>
                </mdb-modal-footer>
              </mdb-modal>

            

                import { mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                  },
                  data() {
                    return {
                      ytmodal: false,
                    }
                  };
                }
              

Modal Vimeo



              <mdb-btn color="primary" @click.native="vmmodal=true">Launch modal</mdb-btn>
              <mdb-modal v-if="vmmodal" @close="vmmodal=false">
                <mdb-modal-body class="p-0">
                  <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                    <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/115098447" allowfullscreen></iframe>
                  </div>
                </mdb-modal-body>
                <mdb-modal-footer center>
                  <span class="mr-4">Spread the word!</span>
                  <mdb-btn tag="a" floating size="sm" class="btn-fb">
                    <mdb-icon icon="facebook"/>
                  </mdb-btn>
                  <mdb-btn tag="a" floating size="sm" class="btn-tw">
                    <mdb-icon icon="twitter"/>
                  </mdb-btn>
                  <mdb-btn tag="a" floating size="sm" class="btn-gplus">
                    <mdb-icon icon="google-plus"/>
                  </mdb-btn>
                  <mdb-btn tag="a" floating size="sm" class="btn-ins">
                    <mdb-icon icon="linkedin"/>
                  </mdb-btn>
                  <mdb-btn outline="primary" rounded size="md" @click.native="vmmodal=false" class="ml-4">close</mdb-btn>
                </mdb-modal-footer>
              </mdb-modal>

            

                import { mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                  },
                  data() {
                    return {
                      vmmodal: false,
                    }
                  };
                }
              

Modal Product MDB Pro component



                      <mdb-btn color="default" @click="product=true" class="mb-3">launch modal</mdb-btn>
                      <mdb-modal v-if="product" @close="product = false" size="lg" info>
                        <mdb-modal-body>
                          <mdb-row>
                            <mdb-column lg="5">
                              <mdb-carousel :interval="0" showControls showIndicators thumbnails  :indicatorStyle="{width: '100px'}">
                                <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).jpg" thumbnail="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).jpg" alt="First slide">
                                </mdb-carousel-item>
                                <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).jpg" thumbnail="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).jpg" alt="Second slide">
                                </mdb-carousel-item>
                                <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).jpg" thumbnail="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).jpg" alt="Third slide">
                                </mdb-carousel-item>
                              </mdb-carousel>
                            </mdb-column>
                            <mdb-column lg="7">
                              <h2 class="h2-responsive product-name">
                                <strong>Product Name</strong>
                              </h2>
                              <h4 class="h4-responsive">
                                <span class="green-text">
                                  <strong>$49</strong>
                                </span>
                                <span class="grey-text">
                                  <small>
                                    <strong>$89</strong>
                                  </small>
                                </span>
                              </h4>

                              <mdb-accordion :panes="panes" material/>

                              <mdb-card-body>
                                <mdb-row>
                                  <mdb-column md="6">
                                    <mdb-select :options="[
                                      {value: '-1', text: 'Choose your color', disabled: true, selected: true},
                                      {value: 'white', text: 'White'},
                                      {value: 'black', text: 'Black'},
                                      {value: 'pink', text: 'Pink'}
                                    ]" />
                                  </mdb-column>
                                  <mdb-column md="6">
                                    <mdb-select :options="[
                                      {value: '-1', text: 'Choose your size', disabled: true, selected: true},
                                      {value: 'xs', text: 'XS'},
                                      {value: 's', text: 'S'},
                                      {value: 'l', text: 'L'}
                                    ]" />
                                  </mdb-column>
                                </mdb-row>
                                <div class="text-center">
                                  <mdb-btn color="secondary" @click="product=false">Close</mdb-btn>
                                  <mdb-btn color="primary" icon="cart-plus" iconClass="ml-2 white-text" iconRight>Add to cart</mdb-btn>
                                </div>
                              </mdb-card-body>
                            </mdb-column>
                          </mdb-row>
                        </mdb-modal-body>
                      </mdb-modal>

                  

                      import { mdbRow, mdbColumn, mdbBtn, mdbIcon, mdbModal, mdbModalBody, mdbAccordion, mdbCardBody, mdbSelect } from 'mdbvue';

                      export default {
                        name: 'ModalExamplesPage',
                        components: {
                          mdbRow,
                          mdbColumn,
                          mdbBtn,
                          mdbIcon,
                          mdbModal,
                          mdbModalBody,
                          mdbAccordion,
                          mdbCardBody,
                          mdbSelect
                        },
                        data() {
                          return {
                            product: false,
                          }
                        };
                      }
                    

Modal Social Share



                <mdb-btn color="default" class="mb-3" @click="share=true">lanuch modal</mdb-btn>
                <mdb-modal v-if="share" @close="share = false" cascade >
                  <mdb-modal-header color="light-blue darken-3 white-text">
                      <h4 class="title"><mdb-icon icon="users"/> Spreed the word!</h4>
                  </mdb-modal-header>
                  <mdb-modal-body class="text-center">
                    <mdb-btn floating tag="a" class="btn-fb" icon="facebook"/>
                    <mdb-btn floating tag="a" class="btn-tw" icon="twitter"/>
                    <mdb-btn floating tag="a" class="btn-gplus" icon="google-plus"/>
                    <mdb-btn floating tag="a" class="btn-li" icon="linkedin"/>
                    <mdb-btn floating tag="a" class="btn-ins" icon="instagram"/>
                    <mdb-btn floating tag="a" class="btn-pin" icon="pinterest"/>
                    <mdb-btn floating tag="a" class="btn-yt" icon="youtube"/>
                    <mdb-btn floating tag="a" class="btn-dribbble" icon="dribbble"/>
                    <mdb-btn floating tag="a" class="btn-vk" icon="vk"/>
                    <mdb-btn floating tag="a" class="btn-so" icon="stack-overflow"/>
                    <mdb-btn floating tag="a" class="btn-slack" icon="slack"/>
                    <mdb-btn floating tag="a" class="btn-git" icon="github"/>
                    <mdb-btn floating tag="a" class="btn-comm" icon="comments"/>
                    <mdb-btn floating tag="a" class="btn-email" icon="envelope"/>
                  </mdb-modal-body>
                </mdb-modal>

            

                import { mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody
                  },
                  data() {
                    return {
                      share: false,
                    }
                  };
                }
              

Simple Modal Login



              <mdb-btn rounded color="default" @click.native="login=true">launch modal</mdb-btn>
              <mdb-modal v-if="login" @close="login = false">
                <mdb-modal-header class="text-center">
                  <mdb-modal-title tag="h4" bold class="w-100">Sign in</mdb-modal-title>
                </mdb-modal-header>
                <mdb-modal-body class="mx-3 grey-text">
                  <mdb-input label="Your email" icon="envelope" type="email" class="mb-5"/>
                  <mdb-input label="Your password" icon="lock" type="password"/>
                </mdb-modal-body>
                <mdb-modal-footer center>
                  <mdb-btn @click.native="login = false">Login</mdb-btn>
                </mdb-modal-footer>
              </mdb-modal>

          

              import { mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter } from 'mdbvue';

              export default {
                name: 'ModalExamplesPage',
                components: {
                  mdbBtn,
                  mdbModal,
                  mdbModalHeader,
                  mdbModalBody,
                  mdbModalFooter,
                },
                data() {
                  return {
                    login: false,
                  }
                };
              }
            

Simple Modal Register



            <mdb-btn color="default" size="sm" @click.native="register = true">launch modal</mdb-btn>
            <mdb-modal v-if="register" @close="register = false">
            <mdb-modal-header class="text-center">
              <mdb-modal-title tag="h4" bold class="w-100">Sign up</mdb-modal-title>
            </mdb-modal-header>
            <mdb-modal-body class="mx-3 grey-text">
              <mdb-input label="Your name" icon="user" class="mb-5"/>
              <mdb-input label="Your email" icon="envelope" type="email" class="mb-5"/>
              <mdb-input label="Your password" icon="lock" type="password"/>
            </mdb-modal-body>
            <mdb-modal-footer center>
              <mdb-btn @click.native="register = false" color="deep-orange">Sign Up</mdb-btn>
            </mdb-modal-footer>
          </mdb-modal>

            

                import { mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter, mdbInput } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                    mdbInput
                  },
                  data() {
                    return {
                      register: false,
                    }
                  };
                }
              

Simple Modal Subscription



                <mdb-btn color="default" @click.native="subs = true">launch modal</mdb-btn>
                <mdb-modal v-if="subs" @close="subs = false">
                <mdb-modal-header class="text-center">
                  <mdb-modal-title tag="h4" bold class="w-100">Subscribe</mdb-modal-title>
                </mdb-modal-header>
                <mdb-modal-body class="mx-3 grey-text">
                  <mdb-input label="Your name" icon="user" class="mb-5"/>
                  <mdb-input label="Your email" icon="envelope" type="email" class="mb-5"/>
                </mdb-modal-body>
                <mdb-modal-footer center>
                  <mdb-btn @click.native="subs = false" color="indigo" icon="paper-plane-o" iconClass="ml-1">Send</mdb-btn>
                </mdb-modal-footer>
              </mdb-modal>

            

                import { mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbInput, mdbModalFooter } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbInput,
                    mdbModalFooter,
                  },
                  data() {
                    return {
                      subs: false,
                    }
                  };
                }
              

Simple Modal Contact



                <mdb-btn color="default" @click.native="contact = true">launch modal</mdb-btn>
                <mdb-modal v-if="contact" @close="contact = false">
                <mdb-modal-header class="text-center">
                  <mdb-modal-title tag="h4" bold class="w-100">Write to us</mdb-modal-title>
                </mdb-modal-header>
                <mdb-modal-body class="mx-3 grey-text">
                  <mdb-input label="Your name" icon="user" class="mb-5"/>
                  <mdb-input label="Your email" icon="envelope" type="email" class="mb-5"/>
                  <mdb-input label="Subject" icon="tag" class="mb-5"/>
                  <md-textarea icon="pencil" label="Your message"/>
                </mdb-modal-body>
                <mdb-modal-footer center>
                  <mdb-btn @click.native="contact = false" color="unique" icon="paper-plane-o" iconClass="ml-1">Send</mdb-btn>
                </mdb-modal-footer>
              </mdb-modal>

            

                import { mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbInput, mdbModalFooter } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbInput,
                    mdbModalFooter,
                  },
                  data() {
                    return {
                      contact: false,
                    }
                  };
                }
              

Cascading Modal Register / Login MDB Pro component



              <mdb-btn color="default" @click.native="cascading = true">launch modal</mdb-btn>
              <mdb-modal v-if="cascading" @close="cascading = false" cascade tabs>
                <mdb-tab tabs justify class="light-blue darken-3">
                  <mdb-tab-item :active="tabs==1" @click.native.prevent="tabs = 1"><mdb-icon icon="user" class="mr-1"/>Login</mdb-tab-item>
                  <mdb-tab-item :active="tabs==2" @click.native.prevent="tabs = 2"><mdb-icon icon="user-plus" class="mr-1"/>Register</mdb-tab-item>
                </mdb-tab>
                <mdb-modal-body class="mx-3" v-if="tabs==1">
                  <mdb-input label="Your email" icon="envelope" type="email" class="mb-5"/>
                  <mdb-input label="Your password" icon="lock" type="password"/>
                  <div class="mt-2 text-center">
                    <mdb-btn color="info" icon="sign-in" iconClass="ml-1">Log in</mdb-btn>
                  </div>
                </mdb-modal-body>
                <mdb-modal-footer center v-if="tabs==1">
                  <div class="options text-center text-md-right mt-1">
                    <p>Not a member? <a href="#" @click="tabs=2">Sign Up</a></p>
                    <p>Forgot <a href="#">Password?</a></p>
                  </div>
                  <mdb-btn outline="info" class="ml-auto" @click.native="cascading=false">Close</mdb-btn>
                </mdb-modal-footer>
                <mdb-modal-body class="mx-3" v-if="tabs==2">
                  <mdb-input label="Your email" icon="envelope" type="email" class="mb-5"/>
                  <mdb-input label="Your password" icon="lock" type="password" class="mb-5"/>
                  <mdb-input label="Repeat password" icon="lock" type="password"/>
                  <div class="mt-2 text-center">
                    <mdb-btn color="info" icon="sign-in" class="ml-1">Sign Up</mdb-btn>
                  </div>
                </mdb-modal-body>
                <mdb-modal-footer center v-if="tabs==2">
                  <div class="options text-center text-md-right mt-1">
                    <p>Already have an account? <a href="#" @click="tabs=1">Log in</a></p>
                  </div>
                  <mdb-btn outline="info" class="ml-auto" @click.native="cascading=false">Close</mdb-btn>
                </mdb-modal-footer>
              </mdb-modal>

          

              import { mdbBtn, mdbModal, mdbTab, mdbTabItem, mdbModalBody, mdbInput, mdbModalFooter } from 'mdbvue';

              export default {
                name: 'ModalExamplesPage',
                components: {
                  mdbBtn,
                  mdbModal,
                  mdbTab,
                  mdbTabItem,
                  mdbModalBody,
                  mdbInput,
                  mdbModalFooter,
                },
                data() {
                  return {
                    cascading: false,
                  }
                };
              }
            

Modal With Avatar MDB Pro component



                <mdb-btn color="default" @click.native="avatar = true">launch modal</mdb-btn>
                <mdb-modal v-if="avatar" @close="avatar = false" avatar size="sm">
                  <mdb-modal-header :close="false">
                    <mdb-avatar tag="img" src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" alt="avatar" circle  class="img-responsive"/>
                  </mdb-modal-header>
                  <mdb-modal-body class="mb-1 text-center">
                    <h5 class="mt-1 mb-2">Maria Doe</h5>
                    <mdb-input label="Enter password" type="password"/>
                    <div class="mt-5 text-center">
                        <mdb-btn color="cyan" icon="sign-in" iconRight iconClass="ml-1">Login</mdb-btn>
                      </div>
                  </mdb-modal-body>
                </mdb-modal>

            

                import { mdbBtn, mdbModal, mdbModalHeader, mdbAvatar, mdbModalBody, mdbInput } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbAvatar,
                    mdbModalBody,
                    mdbInput
                  },
                  data() {
                    return {
                      avatar: false,
                    }
                  };
                }
              

Subscription Modal With Orange Header



                <mdb-btn color="default" @click.native="header = true">launch modal </mdb-btn>
                <mdb-modal v-if="header" @close="header = false" warning>
                <mdb-modal-header class="text-center">
                  <mdb-modal-title tag="h4" bold class="w-100">Subscribe</mdb-modal-title>
                </mdb-modal-header>
                <mdb-modal-body class="mx-3">
                  <mdb-input label="Your name" icon="user" class="mb-5" iconClass="grey-text"/>
                  <mdb-input label="Your email" icon="envelope" type="email" class="mb-5" iconClass="grey-text"/>
                </mdb-modal-body>
                <mdb-modal-footer center>
                  <mdb-btn @click.native="header = false" outline="warning" icon="paper-plane-o" iconClass="ml-1">Send </mdb-btn>
                </mdb-modal-footer>
              </mdb-modal>

            

                import { mdbBtn, mdbModal, mdbModalHeader, mdbAvatar, mdbModalBody, mdbInput, mdbModalFooter } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbAvatar,
                    mdbModalBody,
                    mdbInput,
                    mdbModalFooter
                  },
                  data() {
                    return {
                      header: false,
                    }
                  };
                }
              

Elegant Modal Login MDB Pro component


                <mdb-btn color="default" @click.native="elegant = true">launch modal</mdb-btn>
                <mdb-modal v-if="elegant" @close="elegant = false" elegant>
                  <mdb-modal-header class="text-center">
                    <mdb-modal tag="h3" bold class="w-100 my-3">Sign in</mdb-modal>mdb-modal-title>
                  </mdb-modal-header>
                  <mdb-modal-body class="mx-3">
                    <mdb-input label="Your email" type="email" class="mb-5 grey-text"/>
                    <mdb-input label="Enter password" type="password" class="pb-3">
                  </mdb-input>
                  <p class="font-small blue-text d-flex justify-content-end mb-5">
                    Forgot <a class="ml-1"> Password?</a>
                  </p>
                  <div class="text-center mb-3">
                    <mdb-btn gradient="blue" block rounded>Sign In</mdb-btn>
                  </div>
                  <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2">or Sign in with:</p>
                  <mdb-row center class="my-3">
                    <mdb-btn color="white" rounded class="mr-md-3 z-depth-1a" icon="facebook"></mdb-btn>
                    <mdb-btn color="white" rounded class="mr-md-3 z-depth-1a" icon="twitter"></mdb-btn>
                    <mdb-btn color="white" rounded class="mr-md-3 z-depth-1a" icon="google-plus"></mdb-btn>
                  </mdb-row>
                </mdb-modal-body>
                <mdb-modal-footer class="mx-5 pt-3 mb-1" end>
                  <p class="font-small grey-text">Not a member? <a class="blue-text ml-1">Sign Up</a></p>
                </mdb-modal-footer>
              </mdb-modal>

            

                import { mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbInput, mdbModalFooter } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbInput,
                    mdbModalFooter
                  },
                  data() {
                    return {
                      elegant: false,
                    }
                  };
                }
              

Dark Modal Register MDB Pro component


                <mdb-btn color="default" @click.native="dark = true">launch modal</mdb-btn>
                <mdb-modal v-if="dark" @close="dark = false" dark bgSrc="https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).jpg">
                  <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
                    <mdb-modal-header class="text-center pb-4">
                      <mdb-modal-title tag="h3" bold class="w-100 my-3 white-text"><strong>SIGN</strong> <a class="green-text font-weight-bold"><strong>UP</strong></a>
                      </mdb-modal-title>
                    </mdb-modal-header>
                    <mdb-modal-body>
                      <mdb-input label="Your email" type="email" class="mb-5" labelColor="white"/>
                      <mdb-input label="Your password" type="password" class="pb-3" labelColor="white"/>
                      <mdb-input type="checkbox" id="checkbox1" label="Accept the" labelClass="font-small" class="pb-4" wrapperClass="pl-0">
                        <a href="#" class="green-text font-weight-bold font-small" style="margin-left: -3rem"> Terms and Conditions</a>
                      </mdb-input>
                      <mdb-row center class="mb-5">
                        <mdb-column col="3" md="12">
                          <mdb-btn block color="success" rounded>Sign up</mdb-btn>
                        </mdb-column>
                      </mdb-row>
                      <mdb-row end class="my-3 pt-3 white-text font-small">
                        Have an account? <a href="#" class="green-text ml-1 font-weight-bold"> Log in</a>
                      </mdb-row>
                    </mdb-modal-body>
                  </div>
                </mdb-modal>


            

                import { mdbBtn, mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbInput, mdbRow, mdbColumn } from 'mdbvue';

                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalTitle,
                    mdbModalBody,
                    mdbInput,
                    mdbRow,
                    mdbColumn
                  },
                  data() {
                    return {
                      dark: false,
                    }
                  };
                }