Bootstrap Modal with blur effect like iOS


	<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>
        <h1>Modal with blur effect</h1>
        <h2>Put here whatever you want here</h2>
        <h4>For instance, a login form or an article content</h4>
        <h4><kbd>esc</kbd> or click anyway to close</h4>
        <hr>
        <div class="alert alert-danger"><h4>Or a warning !</h4></div>
      </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;
}