javascript - 全页搜索时模糊背景

Question

这里有一个全屏搜索：
http://bootsnipp.com/snippets/featured/full-screen-search

但是，我希望将其与背景模糊结合起来
http://codepen.io/Palestinian/pen/mDKkG

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

但似乎不起作用。
你能教我如何结合它们吗？谢谢。

Answer 1

应该更改选择器问题吗？
我可以产生综合效果。看到，

http://bootsnipp.com/user/snippets/nPve7