Modals / pop-ups
eCommerce modals / pop-ups
Set of design blocks dedicated to building eCommerce modals / pop-ups.
Modal login
<!--Section: Block Content-->
<section>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginForm">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mx-auto">Sign In</h5>
<button type="button" class="close ml-0" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="md-form md-outline">
<i class="fas fa-envelope prefix"></i>
<input type="email" id="modalLoginForm-email" class="form-control">
<label data-error="wrong" data-success="right" for="modalLoginForm-email">Your email</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalLoginForm-password" class="form-control">
<label data-error="wrong" data-success="right" for="modalLoginForm-password">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
</section>
<!--Section: Block Content-->
Modal register
<!--Section: Block Content-->
<section>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRegisterForm">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mx-auto">Sign Up</h5>
<button type="button" class="close ml-0" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="md-form md-outline">
<i class="fas fa-user prefix"></i>
<input type="text" id="modalRegisterForm-name" class="form-control">
<label data-error="wrong" data-success="right" for="modalRegisterForm-name">Your name</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-envelope prefix"></i>
<input type="email" id="modalRegisterForm-email" class="form-control">
<label data-error="wrong" data-success="right" for="modalRegisterForm-email">Your email</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalRegisterForm-password" class="form-control">
<label data-error="wrong" data-success="right" for="modalRegisterForm-password">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!--Section: Block Content-->
Modal Login / Register
<!--Section: Block Content-->
<section>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginRegister">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade show" id="modalLoginRegister" tabindex="-1" role="dialog" aria-modal="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Pills -->
<ul class="nav md-pills nav-justified pills-primary">
<li class="nav-item">
<a class="nav-link border border-primary border-rounded active show" data-toggle="tab"
href="#modalLoginRegister-login" role="tab" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link border border-primary border-rounded" data-toggle="tab"
href="#modalLoginRegister-register" role="tab" aria-selected="false">Register</a>
</li>
</ul>
<!-- Pills -->
<!-- Content -->
<div class="tab-content py-0">
<!-- First panel -->
<div class="tab-pane fade in show active" id="modalLoginRegister-login" role="tabpanel">
<!-- Login form -->
<form id="formLoginRegister-login" class="pt-2" action="login" method="post">
<div class="md-form md-outline">
<i class="fas fa-envelope prefix"></i>
<input type="email" id="formLoginRegister-email" class="form-control">
<label data-error="wrong" data-success="right" for="formLoginRegister-email">Your email</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-lock prefix"></i>
<input type="password" id="formLoginRegiser-password" class="form-control">
<label data-error="wrong" data-success="right" for="formLoginRegiser-password">Your password</label>
</div>
<div class="text-center mt-4 pt-3">
<button type="button" class="btn btn-outline-primary mr-1 mb-2 waves-effect waves-light">Forgot password?</button>
<button type="button" class="btn btn-primary mb-2">Login</button>
</div>
</form>
<!-- Login form -->
</div>
<!-- First panel -->
<!-- Second panel -->
<div class="tab-pane fade" id="modalLoginRegister-register" role="tabpanel">
<!-- Register form -->
<form id="formLoginRegister-register" class="pt-2" action="register" method="post">
<div class="md-form md-outline">
<i class="fas fa-user prefix"></i>
<input type="text" id="formLoginRegister-name" class="form-control">
<label data-error="wrong" data-success="right" for="formLoginRegister-name">Your name</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-pencil-alt prefix"></i>
<input type="text" id="formLoginRegister-username" class="form-control">
<label data-error="wrong" data-success="right" for="formLoginRegister-username">Your username</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-envelope prefix"></i>
<input type="email" id="formLoginRegister-email-example" class="form-control">
<label data-error="wrong" data-success="right" for="formLoginRegister-email-example">Your email</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-lock prefix"></i>
<input type="password" id="formLoginRegister-password-example" class="form-control">
<label data-error="wrong" data-success="right" for="formLoginRegister-password-example">Your password</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-key prefix"></i>
<input type="password" id="formLoginRegister-password-repeat" class="form-control">
<label data-error="wrong" data-success="right" for="formLoginRegister-password-repeat">Repeat password</label>
</div>
<div class="form-check mt-4 mb-3 pl-0 text-left">
<input type="checkbox" class="form-check-input filled-in" id="formLoginRegister-newsletter" name="newsletter">
<label class="form-check-label small grey-text" for="formLoginRegister-newsletter">
I agree to sign up for account notifications and newsletter
</label>
</div>
<div class="text-center">
<p class="small grey-text mb-4">Lorem ipsum dolor sit amet <a target="_blank" href="#!">Privacy Policy</a>.</p>
<button type="button" class="btn btn-primary my-2">Sign up</button>
</div>
</form>
<!-- Register form -->
</div>
<!-- Second panel -->
</div>
<!-- Content -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</section>
<!--Section: Block Content-->
Modal contact
<!--Section: Block Content-->
<section>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalContactForm">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header py-4">
<h5 class="modal-title mx-auto">Write to us</h5>
<button type="button" class="close p-0 m-0" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form md-outline">
<i class="fas fa-user prefix"></i>
<input type="text" id="contactForm-name1" class="form-control">
<label for="contactForm-name1">Your name</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-envelope prefix"></i>
<input type="email" id="contactForm-email1" class="form-control">
<label for="contactForm-email1">Your email</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-tag prefix"></i>
<input type="text" id="contact321" class="form-control">
<label for="contact321">Subject</label>
</div>
<div class="md-form md-outline">
<i class="fas fa-pencil-alt prefix"></i>
<textarea type="text" id="contact81" class="md-textarea form-control" rows="4"></textarea>
<label for="contact81">Your message</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center py-4">
<button class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
</section>
<!--Section: Block Content-->
Modal cart
You have added an item to the basket
Fantasy T-shirt
$12.99
The seller recommends for this product:
Fantasy T-shirt
$12.99
Fantasy T-shirt
$12.99
Sale
Fantasy T-shirt
$12.99
$36.99
Sale
Fantasy T-shirt
$12.99
$36.99
<!--Section: Block Content-->
<section>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalBasket">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="modalBasket" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header py-4">
<h5 class="mb-0">You have added an item to the basket</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3 pt-4 pb-0">
<div class="media mb-3">
<img class="d-flex z-depth-1 rounded mr-3" width="64px"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp" alt="Sample">
<div class="media-body">
<h5>Fantasy T-shirt</h5>
<p class="mb-0"><span><strong>$12.99</strong></span></p class="mb-0">
</div>
</div>
<div class="d-flex justify-content-between align-items-center mb-4">
<a href="#!" type="button" class="card-link-secondary small text-uppercase">Continue shopping</a>
<button type="button" class="btn btn-primary">Go to cart</button>
</div>
<hr>
<h5 class="my-4">The seller recommends for this product:</h5>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 col-lg-3 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p><span><strong>$12.99</strong></span></p>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2"><i
class="fas fa-shopping-cart pr-2"></i>Add
to cart</button>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 col-lg-3 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p><span><strong>$12.99</strong></span></p>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2"><i
class="fas fa-shopping-cart pr-2"></i>Add
to cart</button>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 col-lg-3 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="Sample">
<h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">Sale</span></h4>
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p><span class="text-danger mr-1"><strong>$12.99</strong></span><span
class="text-grey"><strong><s>$36.99</s></strong></span></p>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2"><i
class="fas fa-shopping-cart pr-2"></i>Add
to cart</button>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 col-lg-3 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
alt="Sample">
<h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">Sale</span></h4>
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p><span class="text-danger mr-1"><strong>$12.99</strong></span><span
class="text-grey"><strong><s>$36.99</s></strong></span></p>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2"><i
class="fas fa-shopping-cart pr-2"></i>Add
to cart</button>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<div class="modal-footer d-flex justify-content-center py-4">
<a href="#!" type="button" class="card-link-secondary small text-uppercase">More from this
seller</a>
</div>
</div>
</div>
</div>
</section>
<!--Section: Block Content-->
Modal coupon
<!--Section: Block Content-->
<section>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCoupon">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade top" id="modalCoupon" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="true">
<div class="modal-dialog modal-frame modal-top modal-notify" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row d-flex justify-content-center align-items-center">
<h2 class="mb-3 mb-md-0"><span class="badge badge-primary">v52gs1</span></h2>
<p class="mb-lg-0 mx-4">We have a gift for you! Use this code to get a <strong>10% discount</strong>.</p>
<button class="btn btn-primary mr-2">Get it</button>
<button class="btn btn-outline-primary" data-dismiss="modal">Ok, thanks</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Section: Block Content-->
Modal discount
<!--Section: Block Content-->
<section>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDiscount">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade right" id="modalDiscount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="true">
<div class="modal-dialog modal-side modal-bottom-right " role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pl-0">Discount offer: <span class="font-weight-bold">10% off</span></h5>
<button type="button" class="close ml-0" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row my-3">
<div class="col-3">
<p class="text-center"><i class="fas fa-gift text-primary fa-4x"></i></p>
</div>
<div class="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 class="mb-0"><span class="badge badge-primary">v52gs1</span></h2>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-primary mr-2">Get it now <i class="far fa-gem ml-1 white-text"></i></button>
<button class="btn btn-outline-primary" data-dismiss="modal">Ok, thanks</button>
</div>
</div>
</div>
</div>
</section>
<!--Section: Block Content-->
Modal abandoned cart
<!--Section: Block Content-->
<section>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalAbandonedCart">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade right" id="modalAbandonedCart" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="true">
<div class="modal-dialog modal-side modal-bottom-right" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mx-auto">Product in the cart</h5>
<button type="button" class="close ml-0" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row my-3">
<div class="col-3">
<p class="text-center"><i class="fas fa-shopping-cart text-primary fa-4x"></i></p>
</div>
<div class="col-9">
<p>Do you need more time to make a purchase decision?</p>
<p class="mb-0">No pressure, your product will be waiting for you in the cart.</p>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-primary mr-2">Go to cart</button>
<button class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</section>
<!--Section: Block Content-->
Modal poll
<!--Section: Block Content-->
<section>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade right" id="modalPoll" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="true">
<div class="modal-dialog modal-full-height modal-right" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mx-auto">Feedback request</h5>
<button type="button" class="close ml-0" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="text-center mt-4">
<i class="far fa-file-alt fa-4x mb-3 text-primary animated rotateIn"></i>
<p>
<strong>Your opinion matters</strong>
</p>
<p>Have some ideas about 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="form-check mb-4">
<input class="form-check-input" name="group2" type="radio" id="radio-180" value="option1" checked>
<label class="form-check-label" for="radio-180">Very good</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group2" type="radio" id="radio-280" value="option2">
<label class="form-check-label" for="radio-280">Good</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group2" type="radio" id="radio-380" value="option3">
<label class="form-check-label" for="radio-380">Mediocre</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group2" type="radio" id="radio-480" value="option4">
<label class="form-check-label" for="radio-480">Bad</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group2" type="radio" id="radio-580" value="option5">
<label class="form-check-label" for="radio-580">Very bad</label>
</div>
<p class="text-center">
<strong>What could we improve?</strong>
</p>
<div class="md-form md-outline">
<textarea type="text" id="form-poll" class="md-textarea form-control" rows="4"></textarea>
<label for="form-poll">Your message</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-primary mr-2">Send <i class="fas fa-paper-plane ml-1"></i></button>
<button class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</section>
<!--Section: Block Content-->
Questions or feedback?
Let us know