---
title: "Modal Canvas Overlay — Framer component · Best of Framer"
description: "$10.00 · Framer component · by sherwin · Forms. Modal Canvas Overlay lets you connect a Frame through the Component Instance property and display it inside either a centered modal…"
canonical: "https://framer.elliotli.dev/component/modal-canvas-overlay"
---

[Home](/)/[Components](/components)/[Forms](/components/category/forms)/Modal Canvas Overlay

# Modal Canvas Overlay

Modal Canvas Overlay

[View on Framer](https://framer.com/marketplace/components/modal-canvas-overlay/?via=elliot-li)

![Modal Canvas Overlay preview image 1](https://framer.elliotli.dev/og/component/modal-canvas-overlay/ea73eb1284362236/1600x900.jpg)

## Summary

Modal Canvas Overlay lets you connect a Frame through the Component Instance property and display it inside either a centered modal or a sliding offcanvas panel.

## Description

Modal Canvas Overlay lets you connect a Frame through the Component Instance property and display it inside either a centered modal or a sliding offcanvas panel. Whether it's a reservation form, contact section, menu, announcement, gallery, video, or any custom layout you've designed, your connected Frame opens with smooth, polished animations. Simply connect your Frame, customize the appearance, and your trigger is ready to use. Features Connect any Frame using the Component Instance property Display content as a centered Modal or Offcanvas Left or right offcanvas placement Adjustable offcanvas width Fully customizable CTA button Optional star icon Optional animated arrow Custom modal title and subtitle Advanced typography controls Complete color customization Responsive across desktop, tablet, and mobile Smooth opening and closing animations Backdrop blur effect Click outside to close Press Escape to close Customizable close button Static preview on the Framer canvas Lightweight and easy to customize No code required Perfect For Reservation Forms Contact Sections Booking Interfaces Navigation Menus Image Galleries Videos Announcements Promotional Content Newsletters Custom Layouts Fully Customizable Customize every part of the experience directly from Framer: CTA button text Optional icon and animated arrow Button typography Button colors and hover states Border radius and spacing Modal title and subtitle Typography Background and border colors Accent colors Close button styling Modal or offcanvas display mode Offcanvas position and width Create elegant overlays by simply connecting a Frame through the Component Instance property—giving you complete design freedom while keeping setup fast and code-free.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5747

## Details

- **Author**: sherwin
- **Price**: $10.00
- **Published**: 2026-07-11
- **Updated**: 2026-07-14
- **Added**: 2026-07-11
- **Categories**: Forms

## More across types

-   [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love

## More like this

-   [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing
-   [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK
-   [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield
-   [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from