"Modal with blur effect like iOS"
Bootstrap 3.1.0 Snippet by ferrandiaz

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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"> <!-- Button trigger modal --> <br> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Modal with blur effect </button> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="container"> <div class="row"> <div class="col-sm-6 col-sm-offset-3 text-center"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> <br><br> Dear User, <br> we inform you that the pictures have been deleted. <br> A part from that, the user has been banned from the site. <br> Best Regars. <br> Admin. </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;} .close { font-size: 50px; display:block; }

Related: See More


Questions / Comments: