CODEWITHSUNDEEP
jquerycssjquery-uijquery-mobile
A.M.
A.M.

Reputation: 97

How do I darken behind my overlay panel in jQuery Mobile?

I have taken the panel code from the jQuery Mobile website and incorporated it into my file. I would like to darken or blur the content behind the panel when it is on the screen. I have tried using filter:blur(5px) but to no avail. Am I using the correct syntax? Please see image for desired outcome.

HTML:

<!-- Subheader --> 
        <div data-role="header" class="subheader" data-position="fixed">
            <a href="#filterPanel" class="ui-btn-right" >Filter</a>
            <div class="subheadertext">Available job opportunities...</div>
        </div>

            <!-- Subheader Filter Panel -->
            <div data-role="panel" id="filterPanel" data-display="overlay" data-position="right">
                <p>This will be the filter panel</p>
            </div>

CSS:

/* Subheader Filter Panel */

#filterPanel {
    background-color: #99c5cc;
    color: white;
    text-shadow: none;
}

enter image description here

Upvotes: 0

Views: 407

Answers (1)

End
End

Reputation: 626

You can only apply the filter property blur() to images or SVG: https://www.w3.org/TR/filter-effects-1/#funcdef-blur

In this situation where you want to blur HTML content the best thing to do would be to apply an opacity to the element that is positioned over the content. Looking at jQuery mobile when the side panel is opened it actually provides this type of overlay.

Try adding this CSS to your project:

.ui-panel-dismiss-open {
  background: rgba(0, 0, 0, 0.8) !important;
}

See screenshot of it working on the jQuery Mobile website (please notice the CSS in the console):

enter image description here

Upvotes: 1

Related Questions