Dialog isn't modal like mentioned in the docs

[cheak1974]

Hi Everybody,

is there a possibility to make the dialog really modal?

The API Reference claims that it is modal but the dialog can be closed at any time by clicking onto an area outside the dialog. This is not really what I call modal. The dialog should stay open until the user was using the dedicated method to close the dialog (by calling the the .close() method, e.g. bound to a button).

Maybe you consider to add an "is_modal" modifier to the constructor of the dialog class (with default value set to "False" to keep the original behaviour) and suppress the closing of the dialog by clicking somewhere.

[falkoschindler]

Quasar's "persistent" prop might be what you're looking for:

Description: User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won't dismiss it

https://quasar.dev/vue-components/dialog

So the modified example would look like this:

from nicegui import ui

with ui.dialog().props('persistent') as dialog, ui.card():
    ui.label('Hello world!')
    ui.button('Close', on_click=dialog.close)

ui.button('Open a dialog', on_click=dialog.open)

ui.run()

Actually, I wasn't aware that "modal" dialogs are supposed to stay open when clicking in the background. We should update the documentation.

[cheak1974]

Hi Falko,

I am not that experienced in Quasar, so your help is very much appreciated and yes, the "persistent" prop did the trick.

I think that not only me could find this feature useful so maybe it is a good idea to mention this in the API reference as you proposed. Indeed a "modal" dialog is one the user of the UI can not evade and he has to be interact with before anything else can happen.
https://en.wikipedia.org/wiki/Modal_window

Thank you very much.
Chris