Should overlayed modal cover banner or shouldn't?

Question

We have in our application some screens where we use modals. Recently I have spent some time arguing with my teammates should modal's overlay cover banners and other elements or some elements should always be visible. I think that it's the essence of the modal, that the user's attention should be kept on the modal when it open, and all other elements must be hidden. Not everyone agrees with me.

This example when banner is visible:

This example when all other elements except modal are hidden:

Answer 1

You're correct - all other content should be hidden below the modal's overlay.

From Nielsen Norman:

Definition: A modal dialog is a dialog that appears on top of the main content and moves the system into a special mode requiring user interaction. This dialog disables the main content until the user explicitly interacts with the modal dialog.

And from UXPlanet:

A modal is a window that appears on top of a parent screen. It’s called ‘modal’ because it creates a mode that disables the parent screen but keeps it visible. Users must interact with the modal to return to the main screen.

The disabling of the parent content is a key piece of the concept. By enabling parent elements, you risk users' focus being lost, as well as run into screen reader issues.

Answer 2

If your colleagues prefer the visible banner all the time and for you the most important thing is the modal window, why not making everyone happy with an all-in-one? If the original banner has too long content, the modal window banner can be a simplification, just as a simple point of attention while interacting with the main window and without causing too much visual noise.

Sign in + banner modal window:

_{Image from dribbble}