✅

Link to plugin page: https://zeroqode.com/plugin/popup-alert-notification-modal-plugin-for-bubble-1709829382335x775039738866166900

Demo to preview the settings

✅

Demo page: https://plugbee-iframes.bubbleapps.io/popup

✅

Bubble Editor: https://bubble.io/page?version=live&id=plugbee-iframes&name=popup&tab=Design

Introduction

Empower users to deliver timely alerts and notifications within your Bubble application seamlessly. This versatile plugin offers a range of modal popup options, enabling you to create customizable alerts and notifications tailored to your app's needs.

With the Popup #alert #notification #modal Plugin, you can effortlessly engage users with important messages, prompts, or confirmations directly within your app's interface. Whether it's notifying users of new updates, confirming actions, or displaying critical information, this plugin provides a sleek and responsive solution for enhancing user experience.

Customize the appearance and behavior of your popups with ease, including options for styling, animation effects, and user interactions. From simple informational alerts to interactive modals, the plugin offers flexibility to adapt to various use cases and design preferences.

Utilize the Popup #alert #notification #modal Plugin to streamline user interactions and improve communication within your Bubble app. Enhance engagement, guide user actions, and provide a seamless experience with dynamic popup notifications tailored to your application's requirements.

How to setup

Install plugin Popup #alert #notification #modal

Place the Popup elements on the page

Plugin Element Properties

Element actions

1) Show popup| Alert

2) Show popup| Confirm

3) Show popup| Prompt

Display the Prompt Popup

Title	Description	Type
🏷️ Title	Adds a header to the dialog and places this text. (✔️ Support BB code)	Text, Optional
🏷️ Message	Text displayed in the dialog. (✔️ Support BB code)	Text, Required
🎨 Theme	Theme color of popup	Dropdown
⚙️ Size	Size of popoup	Dropdown
⚙️ Close button	Whether the dialog should have a close button (x) or not.	Checkbox
⚙️ Allow dismissed	Allows the user to dismiss the dialog by hitting ESC or clicking the background.	Checkbox
⚙️ Animate	Animate the dialog in and out.	Checkbox
⚙️ Center vertically	Position the popup in the center	Checkbox
⚙️ Scrollable	Make the popup scrollable	Checkbox
⚙️ Swap button order	Flips the order in which the buttons are rendered, from cancel/confirm to confirm/cancel.	Checkbox
🟢 Button 1 \| Label	Text displayed in the button. (✔️ Support BB code)	Text, Required
🟢 Button 1 \| Style	Theme of the button.	Dropdown, Required
🔴 Button 2\| Label	Text displayed in the button. (✔️ Support BB code)	Text, Required
🔴 Button 2\| Style	Theme of the button.	Dropdown, Required
⚙️ Prompt type	Changes the type of input generated for the prompt dialog.	Dropdown, Required
⚙️ Required	Defines if the input must not be empty for the prompt to complete.	Checkbox
	🟨 TEXT INPUT
⚙️ Placeholder	Set the placeholder option to provide a small amount of "helper" text within a text-based input.	Text, Optional
⚙️ Default value	Set the default value of the input.	Text, Optional
⚙️ Pattern	Required formatting of the input. Not compatible with the multi-line input. If you selected "custom", you'll also need to fill the field below.	Dropdown, Required
⚙️ Custom pattern	Set the custom formatting to require the input value to follow a specific format. Select the "custom" formatting option from the field above and the prompt will not close if the input value fails pattern validation. Must be regex formatted, example: "https?://.+”	Text, Optional
⚙️ Maximum length	(Number) Set the max length to limit the number of characters entered into a text-based input. (✔️ Compatible with the following input types: text, textarea, email, and password)	Number, Optional
⚙️ Enable multiline	Check this to transform the text input into a multi-line text input.	Checkbox
⚙️ Multiline rows	Set the number of rows when using the multiline input type. If omitted, the multiline input will render with the browser's default number of rows.	Number, Optional
	🟧 NUMBER INPUT
⚙️ Placeholder	Set the placeholder option to provide a small amount of "helper" text within a number-based input. This option is not compatible with all browsers.	Text, Optional
⚙️ Default value	Set the default value of the input.	Number, Optional
⚙️ Min. value	Set the minimum value to be entered in the input.	Number, Optional
⚙️ Max. value	Set the maximum value to be entered in the input.	Number, Optional
	🟫 DATE / TIME
⚙️ Placeholder	Set the placeholder option to provide a small amount of "helper" text within a number-based input. This option is not compatible with all browsers.	Text, Optional
⚙️ Input type	The type of the value to be entered, can be a date or a time.	Dropdown, Required
⚙️ Date default value	Set the default value of the input.	Date, Optional
⚙️ Min. date	Set the minimum date to be entered in the input.	Date, Optional
⚙️ Max. date	Set the maximum date to be entered in the input.	Date, Optional
⚙️ Time default value	Set the default value of the input. Must be formatted as "HH:MM”	Text, Optional
⚙️ Min. time	Set the minimum time to be entered in the input. Must be formatted as "HH:MM”	Text, Optional
⚙️ Max. time	Set the maximum time to be entered in the input. Must be formatted as "HH:MM”	Text, Optional
	🟩 Dropdown / Radio / Checkbox
⚙️ Input type	Type of Input(Dropdown, Checkbox, Radio)	Dropdown, Required
⚙️ Option list \| Display / Caption	The list of options to populate the dropdown.	Text, Optional
⚙️ Option list \| IDs	The value returned by the plugin when an option is selected. (✔️ Optional - if not provided, the option caption will be returned)	Text, Optional
⚙️ Default value \| ID	The default value of the dropdown. Must be the ID of the option if the list of IDs is provided.	Text, Optional
	🟦 RANGE
⚙️ Default value	Set the default value of the input. Must be between 0 and 100.	Number, Optional
⚙️ Min. value	Set the minimum value to be entered in the input. Must be between 0 and 100.	Number, Optional
⚙️ Max. value	Set the maximum value to be entered in the input. Must be between 0 and 100.	Number, Optional
⚙️ Step	Set the value that will go on step when changing range input	Number, Optional
	ADVANCED
Custom class	An additional class to apply to the dialog wrapper.	Text, Optional
Custom font	Additional class to apply custom fonts	Dropdown, Optional
Popup ID	An optional ID to be returned in the element state whenever an event is fired. Useful when triggering multiple popups from the same element and easily retrieve the corresponding data.	Text, Optional

4) Show popup| Sweet

Display the Sweet Popup

Title	Description	Type
🏷️ Title	Adds a header to the dialog and places this text. (✔️ Support BB code)	Text, Optional
🏷️ Message	Text displayed in the dialog. (✔️ Support BB code)	Text, Required
🏷️ Footer	Adds a footer to the dialog and places this text. (✔️ Support BB code)	Text, Optional
🏷️ HTML	HTML to render inside the popup. If message and html parameters are provided in the same time, html will be used.	Text, Optional
⚙️ Close button	Whether the dialog should have a close button (x) or not.	Checkbox
⚙️ Dismissable	Allows the user to dismiss the dialog by hitting ESC or clicking the background.	Checkbox
🎨 Theme	Theme color of popup	Dropdown, Required
🎨 Icon	Icon image	Dropdown, Required
🎨 Backdrop color	Color of backdrop	Color, Required
⚙️ Custom icon color	Custom icon color	Color, Optional
⚙️ Custom background	Custom background	Color, Optional
⚙️ Custom text color	Custom text color	Color, Optional
⚙️ Position	Popup window position.	Dropdown, Required
⚙️ Fullscreen	Enables Fullscreen	Checbox
⚙️ Timer duration (ms)	The duration of the timer after which the popup will be closed. In miliseconds.	Number, Optional
⚙️ Timer	Allows the user to dismiss the dialog by hitting ESC or clicking the background.	Checbox
⚙️ Timer progress bar	If set to true, the timer will have a progress bar at the bottom of a popup.	Checbox
⚙️ Animation (show)	Type of animation to apply when popup shows	Dropdown, Optional
⚙️ Animation (hide)	Type of animation to apply when popup hides	Dropdown, Optional
⚙️ Custom width	Popup window width, including paddings. Can be in any CSS unit (px, em/rem, %).	Text, Optional
🎨 Custom image	Add a customized icon or image for the popup.	Image, Optional
⚙️ Image width	If image is set, you can specify image width. Can be in any CSS unit (px, em/rem, %).	Text, Optional
⚙️ Image height	If image is set, you can specify image height. Can be in any CSS unit (px, em/rem, %).	Text, Optional
⚙️ Enable steps	Enables More Popup with more steps	Checkbox
⚙️ Steps labels	Label of steps	Text, Optional
⚙️ Current step	Sets the default step number	Number, Optional
🟢 Enable button 1	Enables the first button	Checkbox
🟢 Button 1\| Label	Text displayed in the button. (✔️ Support BB code)	Text, Required
🟢 Button 1\| Style	Theme of the button.	Dropdown, Required
🟢 Button 1\| Color	Color of the button, only work if you selected the "custom" style above.	Color, Optional
🔴 Enable button 2	Enables the second button	Checkbox
🔴 Button 2\| Label	Text displayed in the button. (✔️ Support BB code)	Text, Optilnal
🔴 Button 2\| Style	Theme of the button.	Dropdown, Required
🔴 Button 2\| Color	Color of the button, only work if you selected the "custom" style above.	Color, Optional
🔵 Enable button 3	Enables the second button	Checkbox
🔵 Button 3\| Label	Text displayed in the button. (✔️ Support BB code)	Text, Optilnal
🔵 Button 3\| Style	Theme of the button.	Dropdown, Required
🔵 Button 3\| Color	Color of the button, only work if you selected the "custom" style above.	Color, Optional
Custom CSS	A custom CSS class for the popup. Please read according documentation: https://sweetalert2.github.io/#customClass	Text, Optional
Popup ID	An optional ID to be returned in the element state whenever an event is fired. Useful when triggering multiple popups from the same element and easily retrieve the corresponding data.	Text, Optional

5) Hide current| Sweet

6) Show popup| Simple notification

7) Hide All| Simple notification

8) Show popup| Advanced notification

Display the Advanced notification Popup

Title	Description	Type
🏷️ Title	Adds a header to the dialog and places this text. (✔️ Support BB code)	Text, Optional
🏷️ Message	Text displayed in the dialog. (✔️ Support BB code)	Text, Required
⚙️ Display mode	Stack is the default behaviour. "Unique" will only display the notification once and not show if another notification is already displayed. "Replace" will close any existing notification.	Dropdown, Required
⚙️ Timer	Enables timer	Checkbox
⚙️ Timer duration (ms)	Timer duration	Number, Optional
⚙️ Show progress bar	Show a progress bar when the timer is enabled.	Dropdown, Required
⚙️ Pause on hover	Pause the toast timeout while the cursor is on it.	Checkbox
⚙️ Reset on hover	Reset the toast timeout while the cursor is on it.	Checkbox
⚙️ Close on click	Allows to close toast clicking on it.	Checkbox
⚙️ Show "close" button	Show "x" close button	Checkbox
⚙️ Allow drag	Allow the notification to be dragged out	Checkbox
⚙️ Preset icon	Use any of the icons from the preset.	Dropdown, Optional
⚙️ Other icon	Please visit Fontawesome website to find the desired icon code	Text, Optional
⚙️ Custom icon	Custom Icon image	Image, Optional
⚙️ Image	Image	Image, Optional
⚙️ Image width	Width of the image in px	Number, Optional
🎨 Preset template	Can be Success, Warning, Error, Information, Question	Dropdown, Optional
🎨 Preset theme	Theme of the preset	Dropdown, Optional
🎨 Preset color	Color of preset	Color, Optional
⚙️ Position	Position of popup	Dropdown, Required
⚙️ Layout	Layout of the notification. Choose "Small" to display the title and message on the same line level.	Dropdown, Required
⚙️ Background color	Background color	Color, Optional
⚙️ Progress bar color	Progress bar color	Color, Optional
⚙️ Icon color	Icon color	Color, Optional
⚙️ Title color	Title color	Color, Optional
⚙️ Title size	Title size	Number, Optional
⚙️ Title line height	Title line height	Number, Optional
⚙️ Message color	Message color	Color, Optional
⚙️ Message size	Message size	Number, Optional
⚙️ Message line height	Message line height	Number, Optional
⚙️ Show overlay	Display an overlay layer on the page.	Checkbox
⚙️ Overlay color	Overlay color	Color, Optional
⚙️ Allow overlay closing	Display an overlay layer on the page when closing	Checkbox
⚙️ Max width	Maximum width of the notification in px.	Number, Optional
⚙️ Custom class	The class that will be applied to the toast. It may be used as a reference.	Text, Optional
⚙️ Animate inside	Enable animations of elements in the toast.	Checkbox
⚙️ Transition In	Default notification open animation.	Dropdown, Optional
⚙️ Transition out	Default notification close animation.	Dropdown, Optional
⚙️ Transition In Mobile	Default notification open animation on mobile.	Dropdown, Optional
⚙️ Transition Out Mobile	Default notification close animation on mobile.	Dropdown, Optional
🟢 Activate \| Button 1	Enables the first button	Checkbox
🟢 Label \| Button 1	Text displayed in the button. (✔️ Support BB code)	Text, Optional
🔴 Activate \| Button 2	Enables the second button	Checkbox
🔴 Label \| Button 2	Text displayed in the button. (✔️ Support BB code)	Text, Optional
🔵 Activate \| Button 3	Enables the third button	Checkbox
🔵 Label \| Button 3	Text displayed in the button. (✔️ Support BB code)	Text, Optional
🟫 Activate \| Input	Enables the input	Checkbox
🟫 Type \| Input	Can be text, password, number, color, date, time	Dropdown, Optional
🟫 Focus \| Input	If enable, the input will be auto-focused when the notification appears.	Checkbox
Popup ID	An optional ID to be returned in the element state whenever an event is fired. Useful when triggering multiple popups from the same element and easily retrieve the corresponding data.	Text, Optional

9) Hide All| Advanced notification

10) Clear/Hide all notifications

Exposed states

Title	Description	Type
Confirm Popup ID	Id of Confirm Popup ID	Text
Prompt Entered value (🟨 Text input)	Prompt Text Input Value	Text
Prompt Entered value (🟧 Number input)	Prompt Number Input Value	Number
Prompt Entered value (🟦 Range)	Prompt Range Input Value	Text
Prompt Selected option ID (🟩 Dropdown / Radio / Checkbox)	Prompt Id of selected option, can be Dropdown, Radio or Checkbox	Text
Prompt Selected date (🟫 Date / Time)	Prompt Selected date	Date
Prompt Selected time - hours (🟫 Date / Time)	Prompt Selected time hours	Number
Prompt Selected time - minutes (🟫 Date / Time)	Prompt Selected time minutes	Number
Prompt Popup ID	Prompt Popup ID	Text
Sweet Popup ID	Sweet Popup ID	Text
Advanced notification Entered value (🟨 Text input)	Advanced notification Text Input Value	Text
Advanced notification Entered value (🟧 Number input)	Advanced notification Number Input Value	Number
Advanced notification Entered value (🟩 Color)	Advanced notification Color Value	Text
Advanced notification Entered value (🟫 Date)	Advanced notification Selected date	Number
Advanced notification Entered value (🟫 Time)	Advanced notification Selected time	Text
Advanced notification Popup ID	Advanced notification Popup ID	Text

Element events

Title	Description
A Popup \| Alert is Dismissed	Triggers when Alert Popup is dismissed
A Popup \| Confirm is Confirmed	Triggers when Confirm Popup is confirmed
A Popup \| Confirm is Refused / Dismissed	Triggers when Confirm Popup is dismissed
A Popup \| Prompt Has A Value Entered	Triggers when a value is entered in Prompt Popup
A Popup \| Prompt is Refused / Dismissed	Triggers when Prompt popup is dismissed
A Popup \| Sweet is Dismissed	Triggers when Sweet Popup is dismissed
A Popup \| Sweet Button 1 is Clicked	Triggers when Sweet Button 3 is Clicked
A Popup \| Sweet Button 2 is Clicked	Triggers when Sweet Button 3 is Clicked
A Popup \| Sweet Button 3 is Clicked	Triggers when Sweet Button 3 is Clicked
A Popup \| Advanced Notification Input's Value Has Changed	Triggers when Advanced Notification Input value changed
A Popup \| Advanced Notification is Dismissed	Triggers when Advanced Notification Popup is Dismissed
A Popup \| Advanced Notification Has Expired	Triggers when Advanced Notification Popup Has Expired
A Popup \| Advanced Notification Button 1 is Clicked	Triggers when Advanced Notification Button 1 is Clicked
A Popup \| Advanced Notification Button 2 is Clicked	Triggers when Advanced Notification Button 2 is Clicked
A Popup \| Advanced Notification Button 3 is Clicked	Triggers when Advanced Notification Button 3 is Clicked

Popup #alert #notification #modal

Demo to preview the settings

Introduction

How to setup

Plugin Element Properties

Element actions

1) Show popup| Alert

2) Show popup| Confirm

3) Show popup| Prompt

4) Show popup| Sweet

5) Hide current| Sweet

6) Show popup| Simple notification

7) Hide All| Simple notification

8) Show popup| Advanced notification

9) Hide All| Advanced notification

10) Clear/Hide all notifications

Exposed states

Element events

Changelogs

Update 09.12.24 - Version 1.8.0

Update 24.07.24 - Version 1.7.0

Update 19.06.24 - Version 1.6.0

Update 30.04.24 - Version 1.5.0

Update 26.04.24 - Version 1.4.0

Update 09.04.24 - Version 1.3.0

Update 02.04.24 - Version 1.2.0

Update 07.03.24 - Version 1.1.0

Update 08.12.23 - Version 1.0.7

Update 10.08.23 - Version 1.0.6

Update 08.08.23 - Version 1.0.5

Update 04.08.23 - Version 1.0.4

Update 20.08.22 - Version 1.0.3

Update 16.08.22 - Version 1.0.2

Update 10.08.22 - Version 1.0.1

Update 31.07.22 - Version 1.0.0

Update 03.07.22 - Version 0.0.4

Update 03.07.22 - Version 0.0.3

Update 03.07.22 - Version 0.0.2

Update 03.07.22 - Version 0.0.1