"Modal with blur effect like iOS - Close Button Added"
Bootstrap 3.1.0 Snippet by xewl

<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 + Close Button </button> <p class="text-center"><a href="http://bootsnipp.com/snippets/featured/modal-with-blur-effect-like-ios" title="Original Snippet" target="_top">Original Snippet</a></p> </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 modal-box"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><!-- Close Button --> <h1>Modal with blur effect</h1> <h2>It even has a close button!</h2> <p>Put whatever you want here</p> <p>For instance, a login form or an article.</p> <p><kbd>esc</kbd> or click anywhere outside the box to close</p> <p>Or go back to the <a href="http://bootsnipp.com/snippets/featured/modal-with-blur-effect-like-ios" title="Original Snippet" target="_top">Original Snippet</a> by <a href="http://bootsnipp.com/benjaminb10" title="Bootstrap snippets by benjaminb10" target="_top">benjaminb10</a></p> </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;} .modal-box { -webkit-box-shadow:inset 0 0 10px 0 rgba(0,0,0,.1); box-shadow:inset 0 0 10px 0 rgba(0,0,0,.1); -webkit-border-radius: 30px; border-radius: 30px; margin-top: 5%; }

Related: See More


Questions / Comments: