Nuxt•4mo ago

Close fullscreen UModal by clicking on overlay

I can't figure out how to dismiss a UModal in fullscreen except with the close button or esc key

11 Replies

Hi @pearbender. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- By default, a fullscreen UModal in Nuxt UI should be dismissible by clicking on the overlay, unless you have set the prop :dismissible="false". The dismissible prop controls whether the modal can be closed by clicking outside (on the overlay) or pressing the escape key. Its default value is true, which means clicking the overlay should close the modal—even in fullscreen mode. If clicking the overlay does not close your fullscreen modal, please check the following: - Ensure you have not set :dismissible="false" on your UModal. - Make sure you are not overriding the overlay or modal props in a way that would prevent this behavior. - The close button and ESC key are alternative ways to close the modal, but clicking the overlay should work as long as dismissible is true (the default) UModal Props. Here’s a minimal example that should allow closing by clicking the overlay:

<template>
  <UModal fullscreen title="Modal fullscreen">
    <UButton label="Open" color="neutral" variant="subtle" />

    <template #body>
      <Placeholder class="h-full" />
    </template>
  </UModal>
</template>

<template>
  <UModal fullscreen title="Modal fullscreen">
    <UButton label="Open" color="neutral" variant="subtle" />

    <template #body>
      <Placeholder class="h-full" />
    </template>
  </UModal>
</template>

If you are still unable to close the modal by clicking the overlay, there may be a bug or a custom style interfering. In that case, please double-check your implementation and consider providing a reproduction for further help UModal Usage. Summary:
- By default, clicking the overlay should close a fullscreen UModal. - Ensure dismissible is not set to false. - If it still doesn't work, check for customizations or possible bugs. Let me know if you need help debugging a specific code sample! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

pearbenderOP•4mo ago

@kapa.ai what exactly is the overlay

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- In the context of Nuxt UI's UModal component, the "overlay" refers to the semi-transparent background layer that appears behind the modal dialog when it is open. This overlay visually separates the modal from the rest of the page content and typically prevents interaction with the underlying page until the modal is closed. You can control whether the overlay is shown using the overlay prop (defaults to true). For example:

<UModal :overlay="true">
  <!-- modal content -->
</UModal>

<UModal :overlay="true">
  <!-- modal content -->
</UModal>

The overlay is styled by default to cover the entire viewport and dim the background, as seen in the theme configuration:

overlay: 'fixed inset-0 bg-elevated/75'

overlay: 'fixed inset-0 bg-elevated/75'

This means the overlay is a fixed-position element that covers the whole screen with a semi-transparent background UModal Theme. Clicking on the overlay (when dismissible is true) will close the modal UModal Props. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

pearbenderOP•4mo ago

@kapa.ai if the modal is fullscreen is the overlay visible

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When the UModal is set to fullscreen, the overlay is still visible by default. The overlay is controlled by the overlay prop, which defaults to true, regardless of whether the modal is fullscreen or not. The overlay is a fixed, semi-transparent background that appears behind the modal content and covers the entire viewport UModal Props UModal Theme. So, even in fullscreen mode, unless you explicitly set :overlay="false", the overlay will be present behind your modal. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

pearbenderOP•4mo ago

@kapa.ai the fact that it's behind the modal may be why i can't click it

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you are correct: when the UModal is in fullscreen mode, the overlay is rendered behind the modal content, which itself covers the entire viewport. This means the modal content sits above the overlay and occupies the full screen, so there is no visible or clickable area of the overlay exposed to the user. As a result, clicking "outside" the modal (on the overlay) is not possible, because the modal itself covers everything. This behavior is implied by the default theme configuration, where the fullscreen variant sets the modal content to cover the entire viewport (inset-0), and the overlay is also fixed inset-0—but the modal content is layered above the overlay UModal Theme. So, in fullscreen mode, the overlay is present but completely covered by the modal, making it unclickable. Closing the modal in this case must be done via the close button or ESC key (if enabled) UModal Props. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Close fullscreen UModal by clicking on overlay

Did you find this page helpful?