Modal

Dave Fumberger

Display and dismiss a modal using code overrides.

Also includes a number of styling options including:

  • Transition Type (Top / Bottom / Scale)
  • Corner Radius
  • Backdrop Alpha
  • Backdrop Blur
  • Shadow Radius / Offset / Color

Usage

Add the ‘Modal’ component to your frame and connect it to the frame you wish to display as a modal.

The ‘Modal’ component itself won’t display any content in the frame once connected.

Then using an override change the ‘active’ property/

Properties

Property Description
active                   If modal is shown or not
onDismiss Called when user clicks the background. You need to update the ‘active’ override in here to make modal dismiss

Example Overrides

Example connecting a button to show modal:

import { Override, Data } from “framer”

const data = Data({
    modalActive: false,
})

export function isModal(): Override {
    return {
        active: data.modalActive,
        onDismiss() {
            data.modalActive = false
        },
    }
}

export function isModalButton(): Override {
    return {
        onClick() {
            data.modalActive = true
        },
    }
}

Contact

Any questions, contact me @djfumberger / dave@fumberger.com

Log

14 May 2019 Added option to blur background

13 May 2019 Initial Release

Info

  • Version: 1.2.0
  • Updated: 3 months ago
  • License: MIT

Share

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree