Blurring Content when Dialog triggers

Sometimes across the web UI or UX designer decide to blur the entirely page when a dialog box comes up. I just wrote a small script to create such an effect.

The CSS

.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
}

We only need to create a blur class with the filter argument blur (see references to other CSS3 filters here and here). This one will be applied to our containing element via jQuery.

The Dialog Box can look like this

.dialog-box {
      width: 300px;
      height: 350px;
      background: #fff;
      padding: 25px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
      position: fixed;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -175px;
}

HTML

The HTML Markup is easy, I'll just show you the dialog trigger and dialog content box, the rest would be your own HTML article or whatever.

<!-- the trigger element -->
<a href="#" id="dialog-trigger" class="your-class">Trigger Dialog!</a>

<!-- the dialog box -->
<div id="dialog-box" class="dialog-box">
  <h3>Dialog Box!</h3> <a href="#" id="close" class="close">Close</a>
   <p> Your content goes here</p>
    <!-- all forms or whatever the box contains goes here, too -->
</div>

Those two markups are needed to work with a Dialog Box. Next we'll write some jQuery.

$(document).ready(function() {
  $('#dialog-box').hide();
  $('#dialog-trigger').click(function() {
    $('.wrapper').addClass('blur');
    $('#dialog-box').show(); 
  });

$('#close').click(function() {
    $('#dialog-box').hide();
    $('.wrapper').removeClass('blur');
    });
});

This script covers the following steps:

• hiding the Dialog-Box first
• when trigger is clicked
• add class blur to wrapper
• and show the Dialog-Box
• when close is clicked
• hide the Dialog-Box
• and remove class blur from wrapper

I guess that explains pretty well what's going on with this basic jQuery script. It hides the box first, then it show the box when needed and applies the blur class to the wrapper div (like many web-designer/developer I always contain all my elements inside a wrapper class).

Why don't apply it to the body?

First I tried to apply the blur class to the body but that ended in a mess (see image below).

The result

That's it. You don't need anything more, you can view a live example here on CodePen or see the images below which show the two states.