css filter jquery test

Trying to trigger css filters with jquery

by Marcus

HTML

<body>

  <div class="container">
    <div id="menu" class="toggle">
      Menu
    </div>

    <div id="close" class="toggle">
      close
    </div>

  </div>

  <div id="popup" class="popup_frame">
    POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP
    POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP POPUP
    POPUP POPUP POPUP POPUP POPUP POPUP POPUP
  </div>

  <p>
    a bunch of stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more
    stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff
    blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah
    blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah
    blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah blah blah blah blah blah blah blah blah blah blah blah some more stuff blah blah blah blah blah blah blah blah blah blah...

CSS

body {
  background-color: blue;
  color: white;
  z-index: 1;
}

.container {
  width: 88%;
  height: 3em;
  clear: both;
  display: block;
  margin: auto;
}

.toggle {
  width: 20%;
  height: 3em;
  float: left;
  display: block;
}

#menu {
  display: block
}

#close {
  display: none;
}

.popup_frame {
  width: 88%;
  height: auto;
  margin-top: 3em;
  display: none;
  background-color: rgba(33, 33, 33, 0.66);
  position: fixed;
  top: 2em;
  left: 1em;
  z-index: 4;
}

JavaScript

$("#menu").click(function() {
  $("#popup").fadeIn('slow');
  $("#close").css("display", "block");
  $("#menu").css("display", "none");
  $("p").css({
    "opacity": "0.33",
    "filter": "blur(88)",
    "-webkit-filter": "blur(88)",
    "-moz-filter": "blur(88)"
  });
 
 });

$("#close").click(function() {
  $("#popup").fadeOut('slow');
  $("#close").css("display", "none");
  $("#menu").css("display", "block");
  $("p").css("opacity", 1);
});