Skip to content
On this page

모달 상세 옵션

가로 크기 조절

기본 가로크기는 600px 이며 추가로 지정 가능합니다.

yaml
viewModal:
  # 너비 설정
  width: 90%
  
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT id, name, address, memo
      FROM properties_copy
      WHERE id = :id
    display: col-1
    params:
    - key: id
      valueFromRow: true

모달 제목

기본값 비어있음

yaml
viewModal:
  # 모달 제목
  name: 제휴사 상세조회
  
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT id, name, address, memo
      FROM properties_copy
      WHERE id = :id
    display: col-1
    params:
    - key: id
      valueFromRow: true

안전하게 창닫기

기본 설정으로는 Esc 또는 backdrop(검은 배경)을 클릭하면 모달팝업이 닫힙니다.
아래의 옵션을 통해 반드시 ‘닫기' 를 클릭해야 닫히도록 설정 가능합니다.

yaml
viewModal:
  # 안전하게 창닫기
  dismissible: false
  
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT id, name, address, memo
      FROM properties_copy
      WHERE id = :id
    display: col-1
    params:
    - key: id
      valueFromRow: true

📘

aside, scroll, drag, minimize/maximize 등 모달 옵션을 안정화 후 추가 예정입니다.

모달에서 제출후 창닫기

closeAfterSubmit를 사용하면 모달을 띄운 다음, 데이터를 수정하고 제출시 자동으로 창을 닫을 수 있습니다.

yaml
modals:
  - path: modal1-:id
    header: false
    height: 400px
    blocks:
      - type: http
        name: 포스트 업데이트
        axios:
          method: POST
          url: https://jsonplaceholder.typicode.com/posts
        closeAfterSubmit: true  
        params:
        - key: published_at