Add a standalone Modal layout

[hoxbro]

Fixes #4700

Heavily inspired by https://github.com/awesome-panel/panel-modal. Thank you @MarcSkovMadsen ❤️

import panel as pn
import holoviews as hv
from panel.layout.modal import Modal

pn.extension("modal")
hv.extension("bokeh")

reviews = "test"
close_method = pn.widgets.Button(name="Close (method)")
open_method = pn.widgets.Button(name="Open (method)").servable()
close_parameter = pn.widgets.Button(name="Close (parameter)")
open_parameter = pn.widgets.Button(name="Open (parameter)").servable()
modal = Modal(reviews, close_method, close_parameter, hv.Curve([]), width=1000, height=1500).servable()

close_method.on_click(lambda event: modal.hide())
open_method.on_click(lambda event: modal.show())
close_parameter.on_click(lambda event: setattr(modal, "open", False))
open_parameter.on_click(lambda event: setattr(modal, "open", True))

close_method.on_click(lambda event: print(modal.open))
open_method.on_click(lambda event: print(modal.open))
close_parameter.on_click(lambda event: print(modal.open))
open_parameter.on_click(lambda event: print(modal.open))

screen-recording-2024-08-06_13.32.58.mp4

TO DO:

• Add tests
• Add documentation
• Look into objects showing up before the modal
• Improve height and width
• Maybe look into window as any.

[codecov]

Codecov Report

Attention: Patch coverage is 81.25000% with 21 lines in your changes missing coverage. Please review.

Project coverage is 86.72%. Comparing base (62cd70d) to head (504ad4c).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
panel/layout/modal.py	56.52%	20 Missing ⚠️
panel/models/modal.py	96.42%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main    #7083    +/-   ##
========================================
  Coverage   86.72%   86.72%            
========================================
  Files         342      345     +3     
  Lines       51831    51984   +153     
========================================
+ Hits        44952    45085   +133     
- Misses       6879     6899    +20     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[contang0]

This is an excellent addition. I'm a heavy user of panel_modal, and always wished that it shipped together with panel. Modal windows allow me to save a lot of space in the app.

One thing I couldn't get panel_modal to do is to update graphs once they have been created (Tabulator meanwhile updates fine), I hope this development will address it.

[ahuang11]

Anything I can help with to get this PR merged?

[philippjfr]

The panel/dist/css/models/modal.css should be moved into panel/styles/models/modal.less and then be included in the model stylesheets like the other models that use less files (e.g. plotly or tabulator).

[philippjfr]

Looks good!