After grabbing the panel code from the jQuery Mobile website and integrating it into my file, I am interested in changing the appearance. I want to either darken or blur the background content when the panel is displayed. I attempted to use filter:blur(5px), but it did not work as expected. Am I using the correct syntax? A visual representation of the desired outcome can be seen in the image below.
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;
}