introduce dialog

main.py

@@ -273,6 +273,15 @@ with example(ui.joystick):
         on_end=lambda _: coordinates.set_text('0, 0'))
     coordinates = ui.label('0, 0')
 
+with example(ui.dialog):
+
+    with ui.dialog() as dialog:
+        with ui.card():
+            ui.label('Hello world!')
+            ui.button('Close', on_click=dialog.close)
+
+    ui.button('Open dialog', on_click=dialog.open)
+
 lifecycle = '''### Lifecycle
 
 You can run a function or coroutine on startup as a parallel task by passing it to `ui.on_startup`.

nicegui/elements/dialog.py

@@ -0,0 +1,31 @@
+import justpy as jp
+from .group import Group
+
+class Dialog(Group):
+
+    def __init__(self,
+                 *,
+                 value: bool = False
+                 ):
+        """Dialog
+
+        Creates a modal dialog.
+
+        :param value: whether the dialog is already opened (default: False)
+        """
+
+        view = jp.QDialog(
+            value=value,
+            classes='row items-start bg-red-400',
+            style='gap: 1em',
+        )
+
+        super().__init__(view)
+
+    def open(self):
+
+        self.view.value = True
+
+    def close(self):
+
+        self.view.value = False

nicegui/ui.py

@@ -5,6 +5,7 @@ class Ui:
     from .elements.button import Button as button
     from .elements.checkbox import Checkbox as checkbox
     from .elements.custom_example import CustomExample as custom_example
+    from .elements.dialog import Dialog as dialog
     from .elements.icon import Icon as icon
     from .elements.image import Image as image
     from .elements.input import Input as input