Vue Modal examples & templates

Vue Bootstrap Modal examples & templates

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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

Cookie consent is a simple, not-invasive popup which displays information about cookies and privacy policy.

We use cookies to improve your website experience

Learn more Ok, thanks 
        
            
    <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

With coupon pop-up modal you can offer your users a special coupon code to use it at checkout.

v52gs1

We have a gift for you! Use this code to get a 10% discount.

Get it No, thanks 
        
            
    <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

With coupon pop-up modal you can offer your users a special coupon code to use it at checkout.

Discount offer: 10% off

Sharing is caring. Therefore, from time to time we like to give our visitors small gifts. Today is one of those days.

Copy the following code and use it at the checkout. It's valid for one day.

v52gs1

Get it now No, thanks 
        
            
    <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/docs/vue/pro/" 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

Display content of interest to users in a modal.

Related article

Baloon floating in Mind-Space

My travel to paradise

Lorem ipsum dolor sit amet consectetur adipisicing elit [...]

        
            
    <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).webp" 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

Don't let the user forget about the product they left in the shopping cart using abandoned cart modal.

Product in the cart

Do you need more time to make a purchase decision?

No pressure, your product will be waiting for you in the cart.

Go to cart Cancel 
        
            
    <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

Allow users to confirm their action one more time before making a final decision.

Are you sure?

Yes No 
        
            
    <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

Get feedback on your product from users using the poll modal.

Feedback request

Your opinion matters

Have some ideas how to improve our product? Give us your feedback.

Your rating

What could we improve?

Send Cancel 
        
            
    <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>
            <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="option1-1" name="radioGroup" value="option1"
                checked />
              <label class="custom-control-label" for="option1-1">Very good</label>
            </div>
            <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="option1-2" name="radioGroup" value="option2" />
              <label class="custom-control-label" for="option1-2">Good</label>
            </div>
            <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="option1-3" name="radioGroup" value="option3" />
              <label class="custom-control-label" for="option1-3">Mediocre</label>
            </div>
            <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="option1-4" name="radioGroup" value="option5" />
              <label class="custom-control-label" for="option1-4">Very bad</label>
            </div>
            <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="option1-5" name="radioGroup" value="option5" />
              <label class="custom-control-label" for="option1-5">Bad</label>
            </div>
            <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

You can preview the shopping cart with products that your customers have added in a modal.

# Product name Price Remove
1 Product 1 100$
2 Product 2 100$
3 Product 3 100$
4 Product 4 100$
5 Total 400$ 
        
            
    <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

Push notifications are one of the most effective ways to inform users about special offers and important events on your website. Display a push modal on users' first visit to your website and allow them to sign up for your list.

Be always up to date

Do you want to receive the push notification about the newest posts?

Yes No 
        
            
    <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/b4/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

Display youtube videos in a pop-up modal.

Spread the word! 
        
            
    <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

Display vimeo videos in a pop-up modal.

Spread the word! 
        
            
    <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

Advanced modal displaying carousels with product photos, description in collapse group and possibility to select specific data via dropdown.

Product Name

$49 $89

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. 
        
            
      <template>
        <mdb-container>
          <mdb-btn color="default" @click="product=true" class="mb-3">Product</mdb-btn>
          <mdb-modal :show="product" class="product-modal" @close="product = false" size="lg" info>
            <mdb-modal-body>
              <mdb-row>
                <mdb-col lg="5">
                  <mdb-carousel :items="carousel" controlls indicators thumbnails :thumbnailWidth="90" />
                </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="colors" />
                      </mdb-col>
                      <mdb-col md="6">
                        <mdb-select :options="sizes" />
                      </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,
          mdbCarousel
        } from 'mdbvue';
        export default {
          name: 'ModalExamplesPage',
          components: {
            mdbRow,
            mdbCol,
            mdbBtn,
            mdbIcon,
            mdbModal,
            mdbModalBody,
            mdbAccordion,
            mdbCardBody,
            mdbSelect,
            mdbCarousel
          },
          data() {
            return {
              product: false,
              carousel: [{
                  img: true,
                  src: "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).webp",
                  thumbnail: "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).webp",
                  alt: "First slide"
                },
                {
                  img: true,
                  src: "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).webp",
                  thumbnail: "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).webp",
                  alt: "Second slide"
                },
                {
                  img: true,
                  src: "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).webp",
                  thumbnail: "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).webp",
                  alt: "Third slide"
                }
              ],
              colors: [{
                  value: 'red',
                  text: 'red'
                },
                {
                  value: 'pink',
                  text: 'pink'
                },
                {
                  value: 'green',
                  text: 'green'
                }
              ],
              sizes: [{
                  value: 'small',
                  text: 'small'
                },
                {
                  value: 'medium',
                  text: 'medium'
                },
                {
                  value: 'large',
                  text: 'large'
                }
              ]
            }
          }
        }
      </script>

Modal Social Share

Display social media share buttons in the modal.

Spreed the word!

        
            
    <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" fab icon="facebook" />
            <mdb-btn floating tag="a" class="btn-tw" fab icon="twitter" />
            <mdb-btn floating tag="a" class="btn-gplus" fab icon="google-plus" />
            <mdb-btn floating tag="a" class="btn-li" fab icon="linkedin" />
            <mdb-btn floating tag="a" class="btn-ins" fab icon="instagram" />
            <mdb-btn floating tag="a" class="btn-pin" fab icon="pinterest" />
            <mdb-btn floating tag="a" class="btn-yt" fab icon="youtube" />
            <mdb-btn floating tag="a" class="btn-dribbble" fab icon="dribbble" />
            <mdb-btn floating tag="a" class="btn-vk" fab icon="vk" />
            <mdb-btn floating tag="a" class="btn-so" fab icon="stack-overflow" />
            <mdb-btn floating tag="a" class="btn-slack" fab icon="slack" />
            <mdb-btn floating tag="a" class="btn-git" fab 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>