Add a standalone Modal layout

[hoxbro]

Fixes #4700

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

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))

https://github.com/user-attachments/assets/3749cb8b-1674-42d0-83ca-d72c3d48381f

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[bot]]

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 :warning:
panel/models/modal.py	96.42%	1 Missing :warning:

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     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: 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?

[hoxbro]

Anything I can help with to get this PR merged?

No, but thank you for asking. I will soon start working on this again.

[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).

[github-actions[bot]]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.