Blur background on modal open - working example & feedback welcome

Panel
1

Hi all,
A gentle blur + opacity drop to the background content seems to do a nice job of focusing users’ attention on a modal window, i.e. this example.

Unless I missed something, Panel Templates don’t provide this option out-of-the-box, so I found a way to add this, which you can see a video clip of here: https://twitter.com/charlesstern/status/1353829953410715654?s=20. Technical summary follows:

First, I define and include a blurred CSS class (this within the .py file which contains my servable object):

import panel as pn
css = '''
.blurred {
   filter: blur(2px) opacity(40%);
}
'''
pn.config.raw_css.append(css)
...

Then, I modified Bokeh’s file.html template as follows: https://gist.github.com/cisaacstern/0094946216ce1b68b15258fbb18fc16d

On my MacBook running a conda env, the original Bokeh file.html (which I replaced with the modified version) resides here:

~/.pyenv/versions/anaconda3-2019.10/envs/terrain_env/lib/python3.7/site-packages/bokeh/core/_templates/file.html

(Definitely a good idea to modify a Bokeh install within a virtual env, rather than a base install! EDIT: Disclaimer: this may very well break your Bokeh install if you try to use it to serve any other template, so definitely do this in a distinct virtual environment or not at all. :slight_smile: )

Those more experienced in JS than me (i.e. most everyone) will surely find room for improvement with the script at the bottom of that template. For example: rather than delaying the JS addEventListener call, it would be more elegant to trigger it on completion of the BokehJS render. Also, there must be a better way to make the event listener persist, as opposed to resetting it on every click event, as I do!

Finally, note that while this could be adapted for other templates, I’m using the React Template and the script assumes that there is only a single button in the sidebar area.

Any and all feedback/criticism welcome and happy to answer questions if others are working on something similar.

Best,
Charles

2 Likes