Rate these docs

Vue Modal Form

Vue Bootstrap Modal Form

Vue Bootstrap modal forms are displayed-on-action pop-up forms that used for gathering data from a website visitors and register or log users.

Using them alongside valuable content might bring a lot of business value to your project.

However, you should remember that using them in a spammy manner might have a completely different outcome - drop of UX and frustrating your users.

Examples of Bootstrap modal form use:

  • Email signup
  • Register modal
  • Contact form

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


Simple Modal Login


          <mdb-container>
            <!-- modal trigger button -->
            <mdb-btn rounded color="default" @click="login=true">launch modal</mdb-btn>
            <!-- simple login modal -->
            
            <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="login = false">Login</mdb-btn>
              </mdb-modal-footer>
            </mdb-modal>
          </mdb-container>
        

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

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

Simple Modal Register


              <mdb-container>
                <!-- modal trigger button -->
                <mdb-btn color="default" size="sm" @click="register = true">launch modal</mdb-btn>

                <!-- simple login modal -->
                <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="register = false" color="deep-orange">Sign Up</mdb-btn>
                  </mdb-modal-footer>
                </mdb-modal>
              </mdb-container>

          

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

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

Simple Modal Subscription


            <mdb-container>
              <!-- modal trigger button -->
              <mdb-btn color="default" @click="subs = true">launch modal</mdb-btn>

              <!-- simple login modal -->
              <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="subs = false" color="indigo" icon="paper-plane-o" iconClass="ml-1">Send</mdb-btn>
                </mdb-modal-footer>
              </mdb-modal>
            </mdb-container>
          

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

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

Simple Modal Contact


              <mdb-container>
                <!-- modal trigger button -->
                <mdb-btn color="default" @click="contact = true">launch modal</mdb-btn>

                <!-- simple login modal -->
                <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="contact = false" color="unique" icon="paper-plane-o" iconClass="ml-1">Send</mdb-btn>
                  </mdb-modal-footer>
                </mdb-modal>
              </mdb-container>
          

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

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

Cascading Modal Register / Login MDB Pro component


            <mdb-container>
              <!-- modal trigger button -->
              <mdb-btn color="default" @click="cascading = true">launch modal</mdb-btn>

                <!-- simple login modal -->
                <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.prevent="tabs = 1"><mdb-icon icon="user" class="mr-1"/>Login</mdb-tab-item>
                    <mdb-tab-item :active="tabs==2" @click.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="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="cascading=false">Close</mdb-btn>
                  </mdb-modal-footer>
                </mdb-modal>
            </mdb-container>
        

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

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

Modal With Avatar MDB Pro component


              <mdb-container>
                <!-- modal trigger button -->
                <mdb-btn color="default" @click="avatar = true">launch modal</mdb-btn>

                <!-- simple login modal -->
                <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>
              </mdb-container>

          

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

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

Subscription Modal With Orange Header



              <mdb-container>
                <!-- modal trigger button -->
                <mdb-btn color="default" @click="header = true">launch modal </mdb-btn>

                <!-- simple login modal -->
                <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="header = false" outline="warning" icon="paper-plane-o" iconClass="ml-1">Send </mdb-btn>
                  </mdb-modal-footer>
                </mdb-modal>
              </mdb-container>
          

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

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

Elegant Modal Login MDB Pro component


              <mdb-container>
                <!-- modal trigger button -->
                <mdb-btn color="default" @click="elegant = true">launch modal</mdb-btn>

                <!-- simple login modal -->
                <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>
              </mdb-container>
                  
                

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

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

Dark Modal Register MDB Pro component


              <mdb-container>
                <!-- modal trigger button -->
                <mdb-btn color="default" @click="dark = true">launch modal</mdb-btn>

                <!-- simple login modal -->
                <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>
              </mdb-container>
          

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

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