"Exit Popup - Bootstrap Modal"
Bootstrap 4.1.1 Snippet by landingplanet

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Shop Homepage</title> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <!-- Page Content --> <div class="container"> <div class="row"> <div class="col-lg-3"> <h1 class="my-4">Shop Name</h1> <div class="list-group"> <a href="#" class="list-group-item">Category 1</a> <a href="#" class="list-group-item">Category 2</a> <a href="#" class="list-group-item">Category 3</a> </div> </div> <!-- /.col-lg-3 --> <div class="col-lg-9"> <div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="http://placehold.it/900x350" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="http://placehold.it/900x350" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="http://placehold.it/900x350" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Item One</a> </h4> <h5>$24.99</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p> </div> <div class="card-footer"> <small class="text-muted">★ ★ ★ ★ ☆</small> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Item Two</a> </h4> <h5>$24.99</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur! Lorem ipsum dolor sit amet.</p> </div> <div class="card-footer"> <small class="text-muted">★ ★ ★ ★ ☆</small> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Item Three</a> </h4> <h5>$24.99</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p> </div> <div class="card-footer"> <small class="text-muted">★ ★ ★ ★ ☆</small> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Item Four</a> </h4> <h5>$24.99</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p> </div> <div class="card-footer"> <small class="text-muted">★ ★ ★ ★ ☆</small> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Item Five</a> </h4> <h5>$24.99</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur! Lorem ipsum dolor sit amet.</p> </div> <div class="card-footer"> <small class="text-muted">★ ★ ★ ★ ☆</small> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Item Six</a> </h4> <h5>$24.99</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p> </div> <div class="card-footer"> <small class="text-muted">★ ★ ★ ★ ☆</small> </div> </div> </div> </div> <!-- /.row --> </div> <!-- /.col-lg-9 --> </div> <!-- /.row --> </div> <!-- /.container --> <!-- The Modal --> <div class="modal fade" id="exitPopup"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <a href="#"> <img src="http://placehold.it/900x400" class="img-fluid"> </a> <!-- Modal footer --> <button type="button" class="btn close button-close-modal" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> </div> <!-- Footer --> <footer class="py-5 bg-dark"> <div class="container text-center"> <a href="https://landingplanet.com/" class="m-0 text-center text-white">LandingPlanet</a> </div> <!-- /.container --> </footer> <script> jQuery(document).ready(function($){ $("html").mouseleave(function() { $('#exitPopup').modal('show') }); }); </script> </body> </html>
.button-close-modal { position: absolute; top: 0px; right: 5px; opacity: 1; }
// Script is added inline in HTML

Questions / Comments: