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

<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> <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>You can add any html and css ;)</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; }

Related: See More


Questions / Comments:

Here is the close button, sorry for the delay ;)

benjaminb10 () - 3 years ago - Reply 0


For close button
Just add
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>

after
Line <div class="row"> in modal html

Prasad Gore () - 3 years ago - Reply 0


Close button!!!

Sanket () - 3 years ago - Reply 0


CLOSE BUTTON PL

safri4u () - 3 years ago - Reply 0


need close button.

techhahn () - 3 years ago - Reply 0


Hi excelent work!..please close button, thx

Juan Henao Rendon () - 3 years ago - Reply 0


You'll put any close button?

Lalalslal () - 4 years ago - Reply 0


Anyone found the closing button version for this xD?

Matthieu vdb () - 4 years ago - Reply 0


The filter property is only supported in webkit isn't it? The blur doesn't seem to work in IE11 or FF despite the use of vendor prefixes.
Looks great in Chrome and Safari though!

http://www.html5rocks.com/e...

EranSch () - 4 years ago - Reply 0


it doesnt work on Firefox :/

avox () - 4 years ago - Reply 0


Just need to increase the value of -moz-filter: blur(15px); to something higher

Vic () - 3 years ago - Reply 0


close button, close button

Guncloud Subektai () - 4 years ago - Reply 0


Love the feature, but a close button and actually seeing the border would be nice.

citizenontherun () - 4 years ago - Reply 0


Really does need a close button.

mouse0270 () - 4 years ago - Reply 0


yes, you guessed , close button would be great

vadimc () - 4 years ago - Reply 0