modal_dialog.py

from textual.app import App, ComposeResult
from textual.widgets import Button, Label
from textual.screen import ModalScreen
from textual.containers import Grid

class WarningDialog(ModalScreen):
    
    def compose(self) -> ComposeResult:
        yield Grid(
            Label("Are you sure you want to quit?", id="question"), 
            Button("Quit", variant="error", id="quit"), 
            Button("Cancel", variant="primary", id="cancel"),
            id="dialog"
        )
        
    def on_button_pressed(self, event: Button.Pressed):
        event.stop()
        if event.button.id == "quit":
            self.dismiss(True)
        else:
            self.dismiss(False)

class MyApp(App):
    CSS_PATH = "test.tcss"
    
    def compose(self) -> ComposeResult:
        button = Button("Open Dialog", id="open_dlg")
        button.styles.background = "red"
        yield button
        
    def on_button_pressed(self, event: Button.Pressed) -> None:
        
        def callback(value: bool) -> None:
            if value is True:
                self.exit()
            
        
        self.push_screen(WarningDialog(), callback=callback)
    
if __name__ == "__main__":
    app = TestApp()
    app.run()

test.tcss

WarningDialog {
    align: center middle;
    #dialog {
    grid-size: 2;
        grid-gutter: 1 2;
        grid-rows: 1fr 3;
        padding: 0 1;
        width: 60;
        height: 11; 
        border: thick $background 80%;
        background: $surface-lighten-3;
    }
    
    #question {
        column-span: 2;
        height: 1fr;
        width: 1fr;
        content-align: center middle;
    }
    
    Button {
        width: 100%;
    }

}

test_modal_dialog.py

import modal_dialog

def test_ui(snap_compare) -> None:
    async def run_before(pilot):
        await pilot.click("#open_dlg")
        dlg = pilot.app.query_one(modal_dialog.WarningDialog)
        dlg.maximize()
        
    assert snap_compare("modal_dialog.py", run_before=run_before)