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

<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; }

Similar snippets: See More


Comments:

vadimc 2014-02-26 08:28:00
    yes, you guessed , close button would be great
mouse0270 2014-02-26 13:16:49
    Really does need a close button.
citizenontherun 2014-02-27 21:35:50
    Love the feature, but a close button and actually seeing the border would be nice.
Guncloud Subektai 2014-03-04 02:51:47
    close button, close button
avox 2014-03-10 06:18:08
    it doesnt work on Firefox :/
Vic 2014-12-08 18:16:21
    Just need to increase the value of -moz-filter: blur(15px); to something higher
EranSch 2014-03-10 16:46:30
    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!
Matthieu vdb 2014-03-10 21:20:02
    Anyone found the closing button version for this xD?
Lalalslal 2014-05-19 16:26:22
    You'll put any close button?
Juan Henao Rendon 2014-08-31 22:58:39
    Hi excelent work!..please close button, thx
techhahn 2014-09-22 16:47:04
    need close button.
safri4u 2015-03-31 01:20:17
    CLOSE BUTTON PL
Sanket 2015-04-10 09:11:40
    Close button!!!
Prasad Gore 2015-04-29 07:27:46
    For close button
Just add
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
benjaminb10 2015-07-06 23:57:13
    Here is the close button, sorry for the delay ;)

Commenting will be back soon.