Blinga fastn package

Modal Cover

Package name:
fastn-community.github.io/bling
License:
Open Source BSD
A modal is a user interface element that is displayed as a temporary or secondary window on top of the main content of a web page. It is designed to capture the user's attention and typically requires an action from the user before they can continue interacting with the rest of the page.

Example

Click to open Modal Cover

How to use

Add bling dependency into your FASTN.ftd
-- fastn.dependency: fastn-community.github.io/bling
Lang:
ftd
import modal-cover inside your .ftd file
-- import: fastn-community.github.io/bling/modal-cover

-- boolean $show-modal: false
Lang:
ftd
Copy paste below code inside your .ftd file
-- modal-cover.button: Click to open Modal Cover
$on-click$: $ftd.toggle($a = $show-modal)
disable-link: true

-- modal-cover.modal-cover: Sign Up!
$open: $show-modal
show-form: true
placeholder: Your email address here
cta-text: Continue
footer: What is it? [Terms and conditions](modal-cover/)

25% Off On Your First Purchase* Enter code WELCOME at checkout
Discover new apps, things to do & more great news added daily!
Lang:
ftd

Properties: modal-cover

Below are details of all properties of modal-cover component.
title
type:
Caption (required)
It's used to add title to modal-cover. In above example Sign Up! is the title used for modal-cover.
modal-body
type:
Body (required)
It's used to add body content to modal-cover. If body content is not added then it won't be seen.
$open
type:
Boolean (optional, default: false)
true shows modal-cover false hides it.
show-form
type:
Boolean (optional, default: false)
Set it to true which shows form input with button inside modal-cover. false hides form input and button.
placeholder
type:
String (optional, default: Your email address here)
If you want to change input placeholder text change its value with value you would like to show inside input as a placeholder text.
cta-text
type:
String (required, default: Continue)
Its used to change value of Button title.
cta-link
type:
String (required)
Its used to add link to form Button.
footer
type:
String (optional)
Using footer property you can add additional info to modal-cover which acts like footer.

Properties: button

Below are details of all properties of modal-cover.button component.

$on-click$: $ftd.toggle($a = $show-modal) $ftd.toggle is a in-built fastn function. which requires a boolean $show-modal to show or hide modal-cover.
$show-modal
type:
Boolean (required, default: false)
Required for button component to show and hide modal-cover.
title
type:
Caption (required)
It's used to add title to button.
disable-link
type:
Boolean (required, default: false)
It's used to enable/disable link property of button.
Copyright © 2023 - FifthTry
Powered by