<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="wrap" class="text-center"> <div class="container"> <div class="row"> <h2>Thanks to <a href="https://bootsnipp.com/snippets/featured/modal-with-blur-effect-like-ios">benjaminb10</a> for the Wrap class</h2> <br/> <h2>Thanks to <a href="https://bootsnipp.com/snippets/RXEWb">untmat</a> for BS 4.0 Modal with close function</h2> </div> </div> <div class="row"> <div class="col-md-2"> </div> <div class="col-md-6"> <div class="address"> <hr /> <h4 class="modal-title">Using Button</h4> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Launch Me</button> <hr /> <h4 class="modal-title">Using Link</h4> <a href="#" class="link" data-toggle="modal" data-target="#myModal">Click Me for Pop-up</a> <hr /> <h4 class="modal-title">Using Img</h4> <img src="https://mdbootstrap.com/img/Others/documentation/1.jpg" alt="click image for modal popup" data-toggle="modal" data-target="#myModal"> </div> </div> </div> </div> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content bg-transparent border-0"> <div class="modal-header"> <h4 class="modal-title">Ordine inviato!</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p>I vostri ordini saranno evasi in ordine cronologico di arrivo. Riceverete, una volta che abbiamo controllato la disponibilità fisica in magazzino, una mail di conferma e, successivamente, una seconda mail di avviso della partenza del pacco.</p> <p>Grazie per aver scelto Mailmodel !</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

body.modal-open #wrap{ -webkit-filter: blur(7px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); } .modal-backdrop {background: #f7f7f7;}