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
<template>
<mdb-container>
<mdb-btn color="default" @click.native="login=true">launch login modal <mdb-icon icon="eye" class="ml-1"/></mdb-btn>
<mdb-modal :show="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>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbBtn, mdbIcon, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter, mdbInput, mdbModalTitle } from 'mdbvue';
export default {
name: 'ModalExamplesPage',
components: {
mdbContainer,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalBody,
mdbModalFooter,
mdbInput,
mdbModalTitle,
mdbIcon
},
data() {
return {
login: false
}
}
}
</script>
Simple Modal Register
<template>
<mdb-container>
<mdb-btn color="default" @click.native="register = true">launch register modal <mdb-icon icon="eye" class="ml-1"/></mdb-btn>
<mdb-modal :show="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>
</template>
<script>
import { mdbContainer, mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter, mdbInput, mdbIcon } from 'mdbvue';
export default {
name: 'ModalExamplesPage',
components: {
mdbContainer,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalBody,
mdbModalFooter,
mdbInput,
mdbIcon
},
data() {
return {
register: false
}
}
}
</script>
Simple Modal Subscription
<template>
<mdb-container>
<mdb-btn color="default" @click.native="subs = true">launch subscrition modal <mdb-icon icon="eye" class="ml-1"/></mdb-btn>
<mdb-modal :show="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">Send <mdb-icon icon="paper-plane" class="ml-1"/></mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbBtn, mdbModal, mdbIcon, mdbModalHeader, mdbModalBody, mdbInput, mdbModalFooter } from 'mdbvue';
export default {
name: 'ModalExamplesPage',
components: {
mdbContainer,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalBody,
mdbInput,
mdbModalFooter,
mdbIcon
},
data() {
return {
subs: false,
}
}
}
</script>
Simple Modal Contact
<template>
<mdb-container>
<mdb-btn color="default" @click.native="contact = true">launch contact form modal <mdb-icon icon="eye" class="ml-1"/></mdb-btn>
<mdb-modal :show="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"/>
<mdb-textarea icon="pencil-alt" label="Your message"/>
</mdb-modal-body>
<mdb-modal-footer center>
<mdb-btn @click.native="contact = false" color="unique">Send <mdb-icon icon="paper-plane" class="ml-1"/></mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbTextarea, mdbIcon, mdbBtn, mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbInput, mdbModalFooter } from 'mdbvue';
export default {
name: 'ModalExamplesPage',
components: {
mdbContainer,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalBody,
mdbInput,
mdbModalFooter,
mdbTextarea,
mdbIcon,
mdbModalTitile
},
data() {
return {
contact: false,
}
}
}
</script>
Cascading Modal Register / Login MDB Pro component
<template>
<mdb-container>
<mdb-btn rounded color="default" @click.native="cascading = true">launch cascading register / login modal <mdb-icon icon="eye" class="ml-1"/></mdb-btn>
<mdb-modal :show="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">Log in <mdb-icon icon="sign-in-alt" class="ml-1"/></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">Sign Up<mdb-icon icon="sign-in-alt" class="ml-1"/></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>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbBtn, mdbModal, mdbTab, mdbTabItem, mdbModalBody, mdbInput, mdbModalFooter, mdbModalTitle, mdbIcon } from 'mdbvue';
export default {
name: 'ModalExamplesPage',
components: {
mdbContainer,
mdbBtn,
mdbModal,
mdbTab,
mdbTabItem,
mdbModalBody,
mdbInput,
mdbModalFooter,
mdbIcon,
mdbModalTitle,
mdbModalTitle
},
data() {
return {
cascading: false,
tabs: 1
}
}
}
</script>
Modal With Avatar MDB Pro component
<template>
<mdb-container>
<mdb-btn rounded color="default" @click.native="avatar = true">launch avatar modal <mdb-icon icon="eye" class="ml-1"/></mdb-btn>
<mdb-modal :show="avatar" @close="avatar = false" avatar size="sm">
<mdb-modal-header :close="false">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" alt="avatar" class="rounded-circle 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-alt" iconRight iconClass="ml-1">Login</mdb-btn>
</div>
</mdb-modal-body>
</mdb-modal>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbIcon, mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbInput } from 'mdbvue';
export default {
name: 'ModalExamplesPage',
components: {
mdbContainer,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalBody,
mdbInput,
mdbIcon
},
data() {
return {
avatar: false,
}
}
}
</script>
Subscription Modal With Orange Header
<template>
<mdb-container>
<mdb-btn color="default" @click.native="header = true">launch header form modal <mdb-icon icon="eye" class="ml-1"/></mdb-btn>
<mdb-modal :show="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">Send <mdb-icon icon="paper-plane" class="ml-1"/></mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbInput, mdbModalFooter, mdbModalTitle, mdbIcon } from 'mdbvue';
export default {
name: 'ModalExamplesPage',
components: {
mdbContainer,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalBody,
mdbInput,
mdbModalFooter,
mdbModalTitle,
mdbIcon
},
data() {
return {
header: false
}
}
}
</script>
Elegant Modal Login MDB Pro component
<template>
<mdb-container>
<mdb-btn rounded color="default" @click.native="elegant = true">launch elegant login modal <mdb-icon icon="eye" class="ml-1"/></mdb-btn>
<mdb-modal :show="elegant" @close="elegant = false" elegant>
<mdb-modal-header class="text-center">
<mdb-modal-title tag="h3" bold class="w-100 my-3">Sign in</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"><mdb-icon fab color="info" icon="facebook-f"/></mdb-btn>
<mdb-btn color="white" rounded class="mr-md-3 z-depth-1a"><mdb-icon fab color="info" icon="twitter"/></mdb-btn>
<mdb-btn color="white" rounded class="mr-md-3 z-depth-1a"><mdb-icon fab color="info" icon="google-plus-g"/></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>
</template>
<script>
import { mdbContainer, mdbBtn, mdbModal, mdbModalHeader, mdbModalBody, mdbInput, mdbModalFooter, mdbModalTitle, mdbRow, mdbIcon } from 'mdbvue';
export default {
name: 'ModalExamplesPage',
components: {
mdbContainer,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalBody,
mdbInput,
mdbModalFooter,
mdbModalTitle,
mdbRow,
mdbIcon
},
data() {
return {
elegant: false
}
}
}
</script>
Dark Modal Register MDB Pro component
<template>
<mdb-container>
<mdb-btn rounded color="default" @click.native="dark = true">launch dark register modal <mdb-icon icon="eye" class="ml-1"/></mdb-btn>
<mdb-modal :show="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" labelColor="white" class="pb-4" wrapperClass="pl-0">
<a href="#" class="green-text font-weight-bold font-small mt-2" style="margin-left: -3rem"> Terms and Conditions</a>
</mdb-input>
<mdb-row center class="mb-5">
<mdb-col col="3" md="12">
<mdb-btn block color="success" rounded>Sign up</mdb-btn>
</mdb-col>
</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>
</template>
<script>
import { mdbContainer, mdbBtn, mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbInput, mdbRow, mdbCol, mdbIcon } from 'mdbvue';
export default {
name: 'ModalExamplesPage',
components: {
mdbContainer,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalTitle,
mdbModalBody,
mdbInput,
mdbRow,
mdbCol,
mdbIcon
},
data() {
return {
dark: false
}
}
}
</script>
Warning: file_get_contents(common/gs.html): failed to open stream: No such file or directory in /var/www/html/legacy/vue/5.8.3/index.php on line 143