Home
home
버블박스
home

브라우저 팝업 사용하기 Use Browser’s Popup

중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

한 줄 요약
This is a plugin that enables utilizing popup which is provided from browser system
브라우저가 제공하는 기본 팝업을 사용할 수 있는 플러그인입니다.
컨택 및 제안
bubbleboxerofficial@gmail.com
노코드 마스터로 거듭나기

Intro

1. Why

For user experience, there are times when pop-ups are necessary. However, when creating MVPs or prototype services with Bubble, it can be challenging to manage pop-ups alongside everything else. Additionally, maintaining consistent designs for all pop-ups is not easy. To streamline the process of creating pop-ups and ensure consistency, you can use this plugin, which allows you to leverage the default pop-ups provided by the browser.
사용자 경험을 위해서 팝업을 사용할 때가 필요합니다. 다만 버블로 MVP, 프로토타입 서비스를 만들 때, 팝업까지 신경써서 관리하기 힘듭니다. 또한, 모든 팝업의 디자인을 통일성 있게 관리하는 것도 쉽지 않습니다. 귀찮은 팝업을 더 빠르게 작업할 수 있도록, 브라우저가 제공하는 기본 팝업들을 사용할 수 있는 플러그인입니다.

2. ChangeLog

1.0.0
show alert popup
안내용 팝업 출력하기
show prompt popup
유저 입력 팝업 출력하기
show confirm popup
확인 팝업 출력하기

Core

1. Instruction

Each browser provides its own default pop-up design, which may differ in appearance and behavior.
크롬, 사파리 등 각 브라우저마다 제공하는 팝업의 디자인이 다른 점을 유의해주세요.

2. Related Docu

플러그인 페이지
데모 링크
에디터 링크

3. Element

a. popup operator

Element that activate the popup provided from browser. If use action event, this element must be in page. and, this element save the return value which user inputs
브라우저가 제공하는 팝업을 사용하게 만드는 요소입니다. 액션 이벤트를 사용하려면, 해당 요소가 페이지에 있어야 합니다. 또한, 유저가 입력한 값이 해당 요소에 저장됩니다.
Status
status
type
desc
promptValue
string
save the return value from [show prompt] action [show prompt] 액션의 결과 값을 저장합니다.
confirmValue
Boolean
save the return value from [show confirm] action [show confirm] 액션의 결과 값을 저장합니다.

4. Action

a. show alert

show alert popup
기본 알림창을 보여줍니다.
Input
field
type
Required
설명
message
string
input the message body in alert popup 팝업창에 들어갈 내용을 입력합니다.
return

b. show prompt

show prompt popup where user input some value as string type
유저에게 문자열 타입의 인풋 값을 받는 팝업창을 보여줍니다.
Input
field
type
Required
설명
message
string
input the message body in alert popup 팝업창에 들어갈 내용을 입력합니다.
defaultValue
string
Input the default value in input field 인풋 필드의 기본 값을 입력합니다.
return
elem_status
type
desc
promptValue
string
save the return value from [show prompt] action [show prompt] 액션의 결과 값을 저장합니다.

c. show confirm

show confirm popup where user input some value as boolean type
유저에게 참/거짓 타입의 응답 값을 받는 팝업창을 보여줍니다.
Input
field
type
Required
설명
message
string
input the message body in alert popup 팝업창에 들어갈 내용을 입력합니다.
return
elem_status
type
desc
confirmValue
booelan
save the return value from [show confirm] action [show confirm] 액션의 결과 값을 저장합니다.

Tutorial

1. setting

On the page, create a [popup operator] element.
페이지에 [popup operator] 요소를 생성합니다.
Now, instead of using Bubble's provided [show popup] action when you need to show a popup, use the actions provided by the plugin: [show alert / prompt / confirm popup operator].
이제 팝업을 보여줘야 하는 워크플로우에서 버블이 제공하는 [show popup] 액션이 아니라, 플러그인이 제공하는 [show alert / prompt / confirm popup operator ] 액션을 사용합니다.

2. prompt popup

If you need the user to input a specific value, use the [show prompt popup operator] action.
만약 유저에게 특정 값을 입력 받아야 한다면, [show prompt popup operator] 액션을 사용합니다.
This will display a popup with an input field.
그러면, 인풋 필드가 있는 팝업이 출력됩니다.
The value entered by the user will then be stored in the [promptValue] state of the [popup operator] element on the page.
이때, 유저가 입력한 값은 페이지에 있는 [popup operator] 요소의 [promptValue]로 저장됩니다.

3. Confirm popup

If you need the user to confirm or cancel something, use the [show confirm popup operator] action.
만약 유저에게 참/거짓을 입력 받아야 한다면, [show confirm popup operator] 액션을 사용합니다.
This will display a popup with confirm and cancel buttons.
그러면, 확인과 취소 버튼이 있는 팝업이 출력됩니다.
The value chosen by the user (True or False) will be stored in the [confirmValue] state of the [popup operator] element on the page.
이때, 유저가 선택한 값(True or False)은 페이지에 있는 [popup operator] 요소의 [confirmValue]로 저장됩니다.
중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요! + 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
Enterprise