exclude a div from a jquery blur effect

Question

I'm building a modal effect for a section of my website, but I've got a problem: I want to make a blur effect only on my background image, but I want to leave neat all the other element. It isn't actually a modal dialog, I just want to add a blur effect on the background image (a div) but I want to preserve a div that I have inside my other div (father) which contains the background images. I can't use an absolute or a fixed position to the my div (it contains only text) that I want to exclude from the effect because in this way I have to change all the layout, so I'm trying to exclude it from the blur effect. On top of that I'm trying to achieve this result with css, so I'm using a jquery toggle with a css class. But I'm open to everything with jquery. Here's my code:

<div class="container-fluid effect">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar" id="page-wrap">
                <ul class="nav nav-sidebar">
                    <li></li>
<li></li>
<li></li>
<li></li>
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <div id="modal">
                    <h1>Heart Healthy</h1>
                    <p>Pulses are a good source of potassium, calcium, zinc, niacin and vitamin K, and are particularly rich in folate, which helps the heart by bringing down the homocysteine levels, a serious risk factor for heart disease. An excellent source of virtually fat-free protein, chickpeas and lentils are rich in soluble fiber, which has been shown to help lower total cholesterol and LDL ("bad") cholesterol levels while also improving the body's ability to utilize insulin. They are also rich in potassium, calcium and magnesium—a mineral combination associated with a reduced risk of heart disease.</p>
                </div>
            </div>
        </div>

The javascript:

$("li").on("click", function() {
            $(".col-md-offset-2.main").toggleClass("dialogIsOpen");
            $("#modal").toggleClass("modalEffect");
        });

And finally the css:

#modal {
    position: relative;
    float: left;
    background: #8dc63f;
    color: white;
    width: 50%;
    left: 22%;
    top: 16%;
    opacity: 0;
    padding: 3%;
    text-align: center;
}
.dialogIsOpen {
    -webkit-filter: blur(5px) grayscale(50%);
    -webkit-transform: scale(0.9);
}
.modalEffect {
    opacity: 1!important;
    pointer-events: auto!important;
}
.col-md-offset-2.main, #modal {
    transition: all 0.4s ease;
}
.col-sm-9.col-sm-offset-3.col-md-10.col-md-offset-2.main {
    background-image: url(images/effect-image.jpg);
    margin-left: 0;
    height: 456px;
    width: 94.333333%;
}