Lowdefy
  • Introduction
  • Tutorial
    • Getting started
    • Creating a page
    • Adding blocks
    • Interactive pages
    • Requests
    • Deploy to Netlify
    • Next steps
  • Concepts
    • Overview
    • The CLI
    • Lowdefy App Schema
    • Context and State
    • Blocks
    • Layout
    • Connections and Requests
    • Events and Actions
    • Operators
    • Secrets
    • Lists
    • Hosting Files
    • Custom Code
    • Custom Blocks
  • Deployment
    • AWS Lambda
    • Docker
    • Netlify
  • User Authentication
    • Introduction
    • OpenID Connect
    • Login and Logout
    • Protected pages
    • User object
    • Roles
  • Input Blocks
    • AutoComplete
    • ButtonSelector
    • CheckboxSelector
    • ChromeColorSelector
    • CircleColorSelector
    • ColorSelector
    • CompactColorSelector
    • DateRangeSelector
    • DateSelector
    • DateTimeSelector
    • GithubColorSelector
    • MonthSelector
    • MultipleSelector
    • NumberInput
    • Pagination
    • ParagraphInput
    • RadioSelector
    • RatingSlider
    • S3UploadButton
    • Selector
    • SliderColorSelector
    • SwatchesColorSelector
    • Switch
    • TextArea
    • TextInput
    • TitleInput
    • TwitterColorSelector
    • WeekSelector
  • Display Blocks
    • Alert
    • Anchor
    • Avatar
    • Breadcrumb
    • Button
    • DangerousHtml
    • DangerousMarkdown
    • Descriptions
    • Divider
    • EChart
    • Html
    • Icon
    • Img
    • Markdown
    • MarkdownWithCode
    • Menu
    • Message
    • MobileMenu
    • Notification
    • Paragraph
    • Progress
    • Statistic
    • Title
  • Container Blocks
    • Affix
    • Badge
    • Box
    • Card
    • Collapse
    • Comment
    • ConfirmModal
    • Drawer
    • Label
    • Modal
    • Result
    • Span
    • Spin
    • Tabs
    • Tooltip
  • Context Blocks
    • Context
    • PageHCF
    • PageHCSF
    • PageHeaderMenu
    • PageHSCF
    • PageSHCF
    • PageSiderMenu
  • List Blocks
    • ControlledList
    • List
  • Connections
    • Amazon Redshift
    • Amazon S3
    • Axios HTTP
    • Google Sheets
    • Knex
    • MariaDB
    • MongoDB
    • Microsoft SQL Server
    • MySQL
    • PostgreSQL
    • SendGrid Email
    • SQLite
  • Actions
    • CallMethod
    • JsAction
    • Link
    • Login
    • Logout
    • Message
    • Notification
    • Request
    • Reset
    • ScrollTo
    • SetGlobal
    • SetState
    • Validate
  • Operators
    • _actions
    • _and
    • _args
    • _array
    • _base64
    • _date
    • _diff
    • _divide
    • _eq
    • _event
    • _format
    • _function
    • _get
    • _global
    • _gt
    • _gte
    • _if
    • _if_none
    • _index
    • _input
    • _js
    • _json
    • _list_contexts
    • _location
    • _log
    • _lt
    • _lte
    • _math
    • _media
    • _menu
    • _mql
    • _ne
    • _not
    • _nunjucks
    • _object
    • _operator
    • _or
    • _product
    • _random
    • _ref
    • _regex
    • _request
    • _secret
    • _state
    • _string
    • _subtract
    • _sum
    • _type
    • _uri
    • _url_query
    • _user
    • _uuid
    • _var
    • _yaml
  • Lowdefy Versions
    • v3.17.2
    • v3.16.5
    • v3.15.0
    • v3.14.1
    • v3.13.0
    • v3.12.6
v3.17.2/container/Modal/

Modal

areas: content, footer

A popup container, presenting the user with a modal dialog. The Modal has a content and a footer content area. The default footer area is the Ok and Cancel buttons; defining a footer area overwrites these buttons.

To open the modal, invoke a modal method.

Block
Methods
onClick:
- id: toggleOpen
  type: CallMethod
  params:
    blockId: block_id
    method: toggleOpen

onClick:
- id: setOpen
  type: CallMethod
  params:
    blockId: block_id
    method: setOpen
    args:
      - open: true

Block Setup
id: block_id
type: Modal

Settings
properties:
Css style to applied to modal body.
Set additional properties for the cancel button.
Text of the Cancel button.
Center the modal vertically.
Whether a close (x) button is visible on top right of the modal dialog or not.
Show footer area.
Whether show mask or not.
Whether to close the modal dialog when the mask (area outside the modal) is clicked.
Css style to applied to modal mask.
Set additional properties for the ok button.
Text of the Ok button.
The modal dialog's title.
Width of the modal dialog.
Css style to applied to modal wrapper.
The z-index of the modal. Useful when displaying two modals simultaneously.
layout:
style:
events:
required:
visible:
Modal JSON Schema Definition
type: object
properties:
  events:
    additionalProperties: false
    properties:
      onCancel:
        description: Trigger actions when Cancel button is clicked.
        type: array
      onClose:
        description: Trigger actions after onOk or onCancel is completed.
        type: array
      onOk:
        description: Trigger actions when Ok button is clicked.
        type: array
      onOpen:
        description: Trigger actions when modal is opened.
        type: array
    type: object
  properties:
    additionalProperties: false
    properties:
      bodyStyle:
        description: Css style to applied to modal body.
        type: object
      cancelButtonProps:
        description: Set additional properties for the cancel button.
        type: object
      cancelText:
        default: Cancel
        description: Text of the Cancel button.
        type: string
      centered:
        default: false
        description: Center the modal vertically.
        type: boolean
      closable:
        default: true
        description: >-
          Whether a close (x) button is visible on top right of the modal dialog
          or not.
        type: boolean
      footer:
        default: true
        description: Show footer area.
        type: boolean
      mask:
        default: true
        description: Whether show mask or not.
        type: boolean
      maskClosable:
        default: true
        description: >-
          Whether to close the modal dialog when the mask (area outside the modal)
          is clicked.
        type: boolean
      maskStyle:
        description: Css style to applied to modal mask.
        type: object
      okButtonProps:
        description: Set additional properties for the ok button.
        type: object
      okText:
        default: Ok
        description: Text of the Ok button.
        type: string
      title:
        description: The modal dialog's title.
        type: string
      width:
        default: 520px
        description: Width of the modal dialog.
        type:
          - string
          - number
      wrapperStyle:
        description: Css style to applied to modal wrapper.
        type: object
      zIndex:
        default: 1000
        description: >-
          The z-index of the modal. Useful when displaying two modals
          simultaneously.
        type: integer
    type: object
  

Was this helpful?

😭
😟
😊
😀
Edit this page on Github

Build internal tools with YAML.

hello@lowdefy.com

Subscribe to our newsletter

Receive the latest Lowdefy updates in your inbox.
Why Lowdefy
Quick Start Tutorial
Deploy to Netlify
How Lowdefy Works
Github Repository
Version Changelog
Apache-2.0 License
© 2021 Lowdefy, Inc. - Give. Easy. Value.