web
mobile
Edit these docs Rate these docs

Vue Modal examples & templates

Vue Bootstrap Modal examples & templates

Multiple examples and advanced usage. Modal Cookies, Coupon, Discount, Abandoned Card, Related Content, Poll, Cart, Youtube, Product and many more.

Kick start your project with any of our examples! Here we present you with a curated list of the most common Modal use cases. Feel free to fiddle & mix!

See also: Modal Core Documentation, Modal Forms and Modal Styles.

Click buttons below to launch modals demo


Modal Cookies


        <template>
          <mdb-container>
            <!-- trigger modal button -->
            <mdb-btn color="default" @click="cookies = true" class="mb-3" size="sm">launch modal</mdb-btn>
            <!-- cookie modal -->
            <mdb-modal :show="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>
          </mdb-container>
        </template>
      

        <script>
          import { mdbContainer, mdbRow, mdbBtn, mdbModal, mdbModalBody } from 'mdbvue';
          export default {
            name: 'ModalExamplesPage',
            components: {
              mdbContainer,
              mdbRow,
              mdbBtn,
              mdbModal,
              mdbModalBody,
            },
            data() {
              return {
                cookies: false,
              }
            }
          }
        </script>
      

Modal Coupon


          <template>
            <mdb-container>
              <!-- trigger modal button -->
              <mdb-btn color="default" class="mb-3" @click="coupon = true">launch modal</mdb-btn>
              <!-- cookie modal -->
              <mdb-modal :show="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>
            </mdb-container>
          </template>
        

          <script>
            import { mdbContainer, mdbRow, mdbBtn, mdbModal, mdbModalBody, mdbBadge } from 'mdbvue';
            export default {
              name: 'ModalExamplesPage',
              components: {
                mdbContainer,
                mdbRow,
                mdbBtn,
                mdbModal,
                mdbModalBody,
                mdbBadge
              },
              data() {
                return {
                  coupon: false,
                }
              }
            }
          </script>
        

Modal Discount


              <template>
                <mdb-container>
                  <!-- trigger modal button -->
                  <mdb-btn color="default" class="mb-3" @click="discount = true">launch modal</mdb-btn>
                  <!-- discount modal -->
                  <mdb-modal :show="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>
                            <mdb-badge>v52gs1</mdb-badge>
                          </h2>
                        </mdb-column>
                      </mdb-row>
                    </mdb-modal-body>
                    <mdb-modal-footer center>
                      <mdb-btn color="danger" tag="a" href="https://mdbootstrap.com/products/vue-ui-kit/" target="_blank" icon="gem" far 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>
                </mdb-container>
            

              <script>
                import { mdbContainer, mdbRow, mdbColumn, mdbIcon, mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter, mdbBadge } from 'mdbvue';
                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbContainer,
                    mdbRow,
                    mdbColumn,
                    mdbIcon,
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                    mdbBadge
                  },
                  data() {
                    return {
                      discount: false,
                    }
                  }
                }
              </script>
            

Modal Related Content


              <template>
                <mdb-container>
                  <!-- trigger modal button -->
                  <mdb-btn color="default" class="mb-3" @click="related = true">launch modal</mdb-btn>
                  <!-- related modal -->
                  <mdb-modal :show="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>
                </mdb-container>
              </template>
            

              <script>
                import { mdbContainer, mdbRow, mdbColumn, mdbBtn, mdbModal, mdbModalHeader, mdbModalBody } from 'mdbvue';
                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbContainer,
                    mdbRow,
                    mdbColumn,
                    mdbBtn,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody
                  },
                  data() {
                    return {
                      related: false,
                    }
                  }
                }
              </script>
            

Modal Abandoned Cart


              <template>
                <mdb-container>
                  <!-- trigger modal button -->
                  <mdb-btn color="default" class="mb-3" @click="abandoned = true">launch modal</mdb-btn>
                  <!-- abandoned modal -->
                  <mdb-modal :show="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-col col="3">
                          <p class="text-center mt-3"><mdb-icon icon="shopping-cart" size="4x"/></p>
                        </mdb-col>
                        <mdb-col 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-col>
                      </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>
                </mdb-container>
              </template>
            

              <script>
                import { mdbContainer, mdbRow, mdbCol, mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter } from 'mdbvue';
                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbContainer,
                    mdbRow,
                    mdbCol,
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter
                  },
                  data() {
                    return {
                      abandoned: false,
                    }
                  }
                }
              </script>
            

Modal Confirm Delete


              <template>
                <mdb-container>
                  <!-- trigger modal button -->
                  <mdb-btn color="default" class="mb-3" @click="confirm = true">lanuch modal</mdb-btn>
                  <!-- confirm modal -->
                  <mdb-modal :show="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>
                </mdb-container>
              </template>
            

              <script>
                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 {
                      confirm: false,
                    }
                  }
                }
              </script>
              

Modal Poll


              <template>
                <mdb-container>
                  <!-- trigger modal button -->
                  <mdb-btn color="default" class="mb-3 mr-5" @click="poll = true">Launch modal</mdb-btn>
                  <!-- poll modal -->
                  <mdb-modal :show="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>
                </mdb-container>
              </template>
            

              <script>
                import { mdbContainer, mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter, mdbInput, mdbTextarea } from 'mdbvue';
                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbContainer,
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                    mdbInput,
                    mdbTextarea
                  },
                  data() {
                    return {
                      poll: false,
                    }
                  }
                }
              </script>
            

Modal Cart


                <template>
                  <mdb-container>
                    <!-- trigger modal button -->
                    <mdb-btn color="default" class="mb-3 mr-5" @click="cart = true">launch modal</mdb-btn>
                    <!-- cart modal -->
                    <mdb-modal :show="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="times"/></a></td>
                              </tr>
                              <tr>
                                <th scope="row">2</th>
                                <td>Product 2</td>
                                <td>100$</td>
                                <td><a><mdb-icon icon="times"/></a></td>
                              </tr>
                              <tr>
                                <th scope="row">3</th>
                                <td>Product 3</td>
                                <td>100$</td>
                                <td><a><mdb-icon icon="times"/></a></td>
                              </tr>
                              <tr>
                                <th scope="row">4</th>
                                <td>Product 4</td>
                                <td>100$</td>
                                <td><a><mdb-icon icon="times"/></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>
                  </mdb-container>
                </template>
              

                <script>
                  import { mdbContainer, mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter, mdbTable, mdbTblHead, mdbTblBody } from 'mdbvue';
                  export default {
                    name: 'ModalExamplesPage',
                    components: {
                      mdbContainer,
                      mdbBtn,
                      mdbIcon,
                      mdbModal,
                      mdbModalHeader,
                      mdbModalBody,
                      mdbModalFooter,
                      mdbTable,
                      mdbTblHead,
                      mdbTblBody
                    },
                    data() {
                      return {
                        cart: false,
                      }
                    }
                  }
                </script>
              

Modal Push


              <template>
                <mdb-container>
                  <!-- trigger modal button -->
                  <mdb-btn color="default" class="mb-3" @click="push = true">launch modal</mdb-btn>
                  <!-- cart modal -->
                  <mdb-modal :show="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>
                </mdb-container>
              </template>
            

              <script>
                import { mdbContainer, mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter } from 'mdbvue';
                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbContainer,
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                  },
                  data() {
                    return {
                      push: false,
                    }
                  }
                }
              </script>
            

Modal YouTube


              <template>
                <mdb-container>
                  <!-- trigger modal button -->
                  <mdb-btn color="primary" @click="ytmodal = true">Launch modal</mdb-btn>
                  <!-- youtube modal -->
                  <mdb-modal :show="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="ytmodal = false" class="ml-4">close</mdb-btn>
                    </mdb-modal-footer>
                  </mdb-modal>
                </mdb-container>
              </template>
            

              <script>
                import { mdbContainer, mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter } from 'mdbvue';
                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbContainer,
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                  },
                  data() {
                    return {
                      ytmodal: false,
                    }
                  }
                }
              </script>
            

Modal Vimeo


              <template>
                <mdb-container>
                  <!-- trigger modal button -->
                  <mdb-btn color="primary" @click="vmmodal = true">Launch modal</mdb-btn>
                  <!-- vimeo modal -->
                  <mdb-modal :show="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="vmmodal = false" class="ml-4">close</mdb-btn>
                    </mdb-modal-footer>
                  </mdb-modal>
                </mdb-container>
              </template>
            

              <script>
                import { mdbContainer, mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter } from 'mdbvue';
                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbContainer,
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody,
                    mdbModalFooter,
                  },
                  data() {
                    return {
                      vmmodal: false,
                    }
                  }
                }
              </script>
            

Modal Product MDB Pro component


                    <template>
                      <mdb-container>
                        <!-- trigger modal button -->
                        <mdb-btn color="default" @click="product = true" class="mb-3">launch modal</mdb-btn>
                        <!-- product modal -->
                        <mdb-modal :show="product" @close="product = false" size="lg" info>
                            <mdb-modal-body>
                              <mdb-row>
                                <mdb-col 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-col>
                                <mdb-col 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-col 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-col>
                                      <mdb-col 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-col>
                                    </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-col>
                              </mdb-row>
                            </mdb-modal-body>
                          </mdb-modal>
                      </mdb-container>
                    </template>
                  

                    <script>
                      import { mdbRow, mdbCol, mdbBtn, mdbIcon, mdbModal, mdbModalBody, mdbAccordion, mdbCardBody, mdbSelect } from 'mdbvue';
                      export default {
                        name: 'ModalExamplesPage',
                        components: {
                          mdbRow,
                          mdbCol,
                          mdbBtn,
                          mdbIcon,
                          mdbModal,
                          mdbModalBody,
                          mdbAccordion,
                          mdbCardBody,
                          mdbSelect
                        },
                        data() {
                          return {
                            product: false,
                          }
                        }
                      }
                    </script>
                  

Modal Social Share


              <template>
                <mdb-container>
                  <!-- trigger modal button -->
                  <mdb-btn color="default" class="mb-3" @click="share = true">lanuch modal</mdb-btn>
                  <!-- share modal -->
                  <mdb-modal :show="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>
                </mdb-container>
              </template>
            

              <script>
                import { mdbContainer, mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody } from 'mdbvue';
                export default {
                  name: 'ModalExamplesPage',
                  components: {
                    mdbContainer,
                    mdbBtn,
                    mdbIcon,
                    mdbModal,
                    mdbModalHeader,
                    mdbModalBody
                  },
                  data() {
                    return {
                      share: false,
                    }
                  }
                }
              </script>