request: user may interact with the rest of UI while modal is displayed

[terraswat]

Summary:

Is there a way to allow interaction with the rest of the UI while a modal is displayed? This is different than just changing the overlay background to transparent. The use case is an informational modal that will fade away in a few seconds without interrupting whatever the user is currently doing.

Steps to reproduce:

1. user requests a statistics job that will run on the server, then return results to the UI
2. statistics job completes and a list on the UI is re-sorted according to the results.
3. the user is in the middle of another task interacting with the UI when the job completes
4. an informational modal of simply "the sort is now by density" is displayed and fades away in 3 seconds.
5. the UI becomes insensitive to any user input except a click to dismiss the modal
6. user is frustrated by having to interrupt her current task to dismiss a low-priority informational message.

Expected behavior:

The expected behavior is identical to the above, except in steps 5 and 6. In step 5 the UI is still sensitive to user input. In step 6, the user's current task is not interrupted, so no frustration.

Additional notes:

This feature would of course not work with the default, shouldCloseOnOverlayClick=true.

[diasbruno]

Hi @terraswat, I think you will be better with a more specialized component. There are many package/component for this purpose ('toast' or 'notification').

With react-modal, you can always try to change the style or by passing the overlay and class name. The idea is to define the overlay with position absolute and set the position and size accordingly.

The full documentation about those feature is at https://reactjs.github.io/react-modal.

[terraswat]

Thank you for the quick response. You gave me an idea on how to do what I want: - make the overlay very small - set the property 'shouldCloseOnOverlayClick' to false So the message either fades away while the user is on another task, or the user may click the close button in the upper right. I really want to use your component because I've standardized style and am reusing a react-modal component for all user messages. thanks! Teresa

…

On Mar 6, 2018, at 2:35 PM, Bruno Dias ***@***.***> wrote: Hi @terraswat, I think you will be better with a more specialized component. There are many package/component for this purpose ('toast' or 'notification'). With react-modal, you can always try to change the style or by passing the overlay and class name. The idea is to define the overlay with position absolute and set the position and size accordingly. The full documentation about those feature is at https://reactjs.github.io/react-modal. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[diasbruno]

That's fine. Glad it helped. :)

I'll close this issue for now, but feel free to reopen if you have questions.

[CMCDragonkai]

I'm looking to do something like this as well.

I want a "modal" floating box that I can drag around (I'm intending to use react-draggable for this). But this box is "persistent". So I may move it to part of the screen, while interacting with the background UI, possibly to create more of these "modal" floating boxes. I can then have multiple modals floating around on my screen.

These modal boxes represent extra details of constructs on the background, but I need to be able to interact with them and the background and other modals at the same time.

Maybe I can just make the overlay the exact same size as the modal box, and ensure that they stay around? One issue is modal hierarchy, that is if multiple modals gets opened up, they will need to overlap each other in some nice way, or there can be collision detection to prevent them from pushing other modal boxes around.

[diasbruno]

Hi @CMCDragonkai

Maybe I can just make the overlay the exact same size as the modal box

Yes, that is a starting point. Probably you will also need to disable some options related to close these modals.

It's possible to do this with react-modal, but I would recommend using a library designed for this purpose (or make a library on top of react-modal).

[CMCDragonkai]

Got a suggestion for a purpose built library like this?

[diasbruno]

react-panels for example (never used).