Add a standalone Modal layout

panel/config.py

@@ -671,6 +671,7 @@ class panel_extension(_pyviz_extension):
         'jsoneditor': 'panel.models.jsoneditor',
         'katex': 'panel.models.katex',
         'mathjax': 'panel.models.mathjax',
+        'modal': 'panel.models.modal',
         'perspective': 'panel.models.perspective',
         'plotly': 'panel.models.plotly',
         'tabulator': 'panel.models.tabulator',

panel/dist/css/models/modal.css

@@ -0,0 +1,86 @@
+:host(.bk-panel-models-modal-Modal) {
+  width: 0;
+  height: 0;
+}
+
+.dialog-container,
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.dialog-container {
+  z-index: 100002;
+  display: flex;
+}
+.dialog-overlay {
+  z-index: 100001;
+  background-color: rgb(43 46 56 / 0.9);
+}
+.dialog-content {
+  margin: auto;
+  z-index: 100002;
+  position: relative;
+  background-color: white;
+  border-radius: 2px;
+  padding: 10px;
+  padding-bottom: 20px;
+}
+fast-design-system-provider .dialog-content {
+  background-color: var(--background-color);
+  border-radius: calc(var(--corner-radius) * 1px);
+}
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes slide-up {
+  from {
+    transform: translateY(10%);
+  }
+}
+.dialog-overlay {
+  animation: fade-in 200ms both;
+}
+.dialog-content {
+  animation:
+    fade-in 400ms 200ms both,
+    slide-up 400ms 200ms both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dialog-overlay,
+  .dialog-content {
+    animation: none;
+  }
+}
+.pnx-dialog-close {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  border: 0;
+  padding: 0.25em;
+  background-color: transparent;
+  font-size: 1.5em;
+  width: 1.5em;
+  height: 1.5em;
+  text-align: center;
+  cursor: pointer;
+  transition: 0.15s;
+  border-radius: 50%;
+  z-index: 100003;
+}
+fast-design-system-provider .pnx-dialog-close {
+  color: var(--neutral-foreground-rest);
+}
+.pnx-dialog-close:hover {
+  background-color: rgb(50 50 0 / 0.15);
+}
+fast-design-system-provider .pnx-dialog-close:hover {
+  background-color: var(--neutral-fill-hover);
+}
+.lm-Widget.p-Widget.lm-TabBar.p-TabBar.lm-DockPanel-tabBar.jp-Activity {
+  z-index: -1;
+}

panel/layout/__init__.py

@@ -38,6 +38,7 @@
 from .float import FloatPanel  # noqa
 from .grid import GridBox, GridSpec  # noqa
 from .gridstack import GridStack  # noqa
+from .modal import Modal
 from .spacer import (  # noqa
     Divider, HSpacer, Spacer, VSpacer,
 )
@@ -58,6 +59,7 @@
     "HSpacer",
     "ListLike",
     "ListPanel",
+    "Modal",
     "Panel",
     "Row",
     "Spacer",

panel/layout/modal.py

@@ -0,0 +1,72 @@
+from __future__ import annotations
+
+from typing import (
+    TYPE_CHECKING, ClassVar, Literal, Mapping, Optional,
+)
+
+import param
+
+from pyviz_comms import JupyterComm
+
+from ..io.resources import CDN_DIST
+from ..models.modal import ModalDialogEvent
+from ..util import lazy_load
+from .base import ListPanel
+
+if TYPE_CHECKING:
+    from bokeh.document import Document
+    from bokeh.model import Model
+    from pyviz_comms import Comm
+
+
+class Modal(ListPanel):
+    """Create a modal dialog that can be opened and closed."""
+
+    open = param.Boolean(default=False, doc="Whether to open the modal.")
+
+    show_close_button = param.Boolean(default=True, doc="Whether to show a close button in the modal.")
+
+    background_close = param.Boolean(default=True, doc="Whether to enable closing the modal when clicking the background.")
+
+    _stylesheets: ClassVar[list[str]] = [f"{CDN_DIST}css/models/modal.css"]
+
+    _rename: ClassVar[Mapping[str, str | None]] = {}
+
+    def _get_model(
+        self, doc: Document, root: Optional[Model] = None,
+        parent: Optional[Model] = None, comm: Optional[Comm] = None
+    ) -> Model:
+        Modal._bokeh_model = lazy_load(
+            'panel.models.modal', 'Modal', isinstance(comm, JupyterComm), root
+        )
+        return super()._get_model(doc, root, parent, comm)
+
+    def show(self):
+        self.open = True
+
+    def hide(self):
+        self.open = False
+
+    def toggle(self):
+        self.open = not self.open
+
+    @param.depends("open", watch=True)
+    def _open(self):
+        self._send_event(ModalDialogEvent, open=self.open)
+
+    def create_button(self, button_type: Literal["show", "hide", "toggle"], **kwargs):
+        """Create a button to show, hide or toggle the modal."""
+        from panel.widgets import Button
+
+        button = Button(**kwargs)
+        match button_type:
+            case "show":
+                button.on_click(lambda *e: self.show())
+            case "hide":
+                button.on_click(lambda *e: self.hide())
+            case "toggle":
+                button.on_click(lambda *e: self.toggle())
+            case _:
+                raise TypeError(f"Invalid button_type: {button_type}")
+
+        return button

panel/models/index.ts

@@ -28,6 +28,7 @@ export {JSONEditor} from "./jsoneditor"
 export {KaTeX} from "./katex"
 export {Location} from "./location"
 export {MathJax} from "./mathjax"
+export {Modal} from "./modal"
 export {PDF} from "./pdf"
 export {Perspective} from "./perspective"
 export {Player} from "./player"

panel/models/modal.py

@@ -0,0 +1,53 @@
+from typing import Any
+
+from bokeh.core.properties import Bool
+from bokeh.events import ModelEvent
+from bokeh.model import Model
+
+from ..io.resources import bundled_files
+from ..util import classproperty
+from .layout import Column
+
+__all__ = (
+    "Modal",
+    "ModalDialogEvent",
+)
+
+
+class Modal(Column):
+
+    __javascript_raw__ = [
+        "https://cdn.jsdelivr.net/npm/a11y-dialog@7/dist/a11y-dialog.min.js"
+    ]
+
+    @classproperty
+    def __javascript__(cls):
+        return bundled_files(cls)
+
+    @classproperty
+    def __js_skip__(cls):
+        return {'A11yDialog': cls.__javascript__[:1]}
+
+    __js_require__ = {
+        'paths': {
+            'a11y-dialog': "https://cdn.jsdelivr.net/npm/a11y-dialog@7/dist/a11y-dialog.min",
+        },
+        'exports': {
+            'A11yDialog': 'a11y-dialog',
+        }
+    }
+
+    open = Bool(default=False, help="Whether or not the modal is open.")
+    show_close_button = Bool(True, help="Whether to show a close button in the modal.")
+    background_close = Bool(True, help="Whether to enable closing the modal when clicking the background.")
+
+
+class ModalDialogEvent(ModelEvent):
+    event_name = 'modal-dialog-event'
+
+    def __init__(self, model: Model | None, open: bool):
+        self.open = open
+        super().__init__(model=model)
+
+    def event_values(self) -> dict[str, Any]:
+        return dict(super().event_values(), open=self.open)