blur the background when full page search
<p>there are a full screen search here:
<a href="http://bootsnipp.com/snippets/featured/full-screen-search" rel="nofollow">http://bootsnipp.com/snippets/featured/full-screen-search</a></p>

<p>However, I hope to combine it with background blured as 
<a href="http://codepen.io/Palestinian/pen/mDKkG" rel="nofollow">http://codepen.io/Palestinian/pen/mDKkG</a></p>

<pre><code>But it seems they have differet way to show up, one of them is popup and another is change the css. If there is a way to combine them? I tried like

    $(function () {
    $('a[href="#search"]').on('click', function(event) {
        event.preventDefault();
        $('#search').addClass('open');
        $.mobile.pageContainer.pagecontainer("getActivePage")
            .addClass("blur-filter");
        $('#search &gt; form &gt; input[type="search"]').focus();
    });

    $('#search, #search button.close').on('click keyup', function(event) {
        if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
            $(this).removeClass('open');
            $(".blur-filter").removeClass("blur-filter");
        }
    });


    //Do not include! This prevents the form from submitting for DEMO purposes only!
    $('form').submit(function(event) {
        event.preventDefault();
        return false;
    })
});
</code></pre>

<p>but it seems not working. 
Can u teach me how to combine them? Thanks.</p>