How we redesigned modal windows for browsers

Reevo Design — Sat, 22 Feb 2025 12:23:24 +0000

In the process of developing a mobile cross-platform app or PWA, we urgently needed touch-friendly modal windows for UI building. We started searching for ready-made solutions compatible with Vue.js. Our key search criteria were: sheet-modal, high customization, no dependencies on specific UI kits, and of course, touch-friendliness.

We found just two solutions that fit the sheet-modal description: Ionic Sheet Modal and Framework7 Sheet Modal.

What is a Sheet Modal?

A Sheet Modal is a modal window that opens from the bottom of the screen and can resize based on user actions. For example, it can be expanded or collapsed by dragging a special indicator. This approach is especially popular in mobile interfaces because it is intuitive and convenient for touch devices.

“A resizable sheet expands when people scroll its contents or drag the grabber, which is a small horizontal indicator that can appear at the top edge of a sheet. Sheets resize according to their detents, which are particular heights at which a sheet naturally rests...” — Apple Developer portal.

Issues with Ready-Made Solutions

Upon integrating other sheet modals, we encountered several drawbacks:

Simplicity: Both solutions offered basic functionality that didn’t meet all our needs.
Bugs: Numerous errors, especially across different devices and browsers.
Jerky Animations: Opening and closing animations were unstable and not always smooth.
UI Kit Dependency: Both solutions were tightly tied to their UI libraries, limiting flexibility.

These challenges led us to consider creating our own solution.

Introducing RvSheet

Touch-Friendly: Specially developed for mobile and touchscreen devices, RvSheet ensures smooth and convenient interaction.

Smooth Animation: Powered by WAAPI, it offers one of the most efficient and smooth animations available today.

Framework-Agnostic: Created with pure JavaScript, RvSheet seamlessly integrates with any framework of your choice, from React to Svelte, Vue, or even vanilla JS.

Highly Customizable: It provides everything needed to satisfy your customization needs through props.

Full Control: Offers complete flexibility with layout and styles, allowing for fully customized user interfaces.

Virtual Keyboard Support: Automatically adjusts and repositions the sheet when a virtual keyboard is opened on mobile devices, ensuring seamless user experience.

Lightweight and Efficient: At just 20 KB, RvSheet delivers high performance without sacrificing functionality.

Zero Dependencies: RvSheet has no dependencies.

We Value Accessibility

At Reevo Design, we develop components compatible with any web library. RvSheet is no exception: it is fully controlled by the developer, from styles to behavior, making it suitable for projects of any scale and complexity.

WAAPI

As researchers, we try to follow modern standards, so we chose WAAPI for browser animations—a powerful native animation tool that eliminates the need to use CSS directly. A key feature is that animations are processed in a separate thread via GPU resources, ensuring smooth animations even under heavy webpage load.

Overcoming the Virtual Keyboard Challenge

One of the biggest challenges was adapting modal windows for virtual keyboards on mobile devices. Many might have faced the issue where the virtual keyboard covers the input when trying to enter text. Additionally, Safari can unpredictable scroll and zoom, disrupting the user experience. We made extensive research and implemented clever solutions to work around this. RvSheet automatically adjusts its height to position the input field right above the keyboard when necessary.

youtube.com

Configuration Flexibility

RvSheet offers multiple modal types and numerous settings. You can choose the right option for any scenario. More details are available in the documentation.

Integration

RvSheet is straightforward to connect and integrate with any JS library.

Example Initialization:

document.addEventListener("DOMContentLoaded", () => {
  const mymodal = document.querySelector("#my-modal");
  const sheet = new RvSheet(mymodal, {
    show: false,
    canClose: true,
    type: "fit-content",
  });
});

HTML Structure:

<div id="my-modal" class="rv-sheet">
  <div class="rv-sheet__header">
    <div style="width: 100%; background: #888; height: 25px;">header</div>
  </div>
  <div class="rv-sheet__content" style="font-size: 28px;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
</div>

Notes:

rv-sheet: Main container class for the sheet.
rv-sheet__header: Container for the header section.
rv-sheet__content: Container for the content of the sheet.

Playground

We’ve prepared a playground to help you get familiar with the product.

RECORD UX-2189

During the first Reevo Earth-Mars expedition, a modular ship component called RvSheet was developed. This component became essential for ensuring intergalactic mobility and adaptability of the ship’s internal modules. During its design phase, engineers faced the challenge of creating something that could instantly isolate data or tasks from the general information space while remaining fully integrated with the ship’s core systems.

RvSheet creates isolated work zones shielded from overloads and ambient noise. Whether it’s a strategic captain’s session or an engineering trajectory adjustment, RvSheet ensured that every task found its protected space.

Github: https://github.com/reevo-design/rv-sheet
Docs: https://reevo.design/docs/sheet
Playground: https://reevo.design/modules/sheet
X/Twitter: https://x.com/reevo_design

DEV Community: Reevo Design

Check out our latest post about RvSheet