Popup
widget
component was renamed to popup
. widget
also works, but it is considered deprecated.Basic usage
The popup provides a frame for all your pop-over needs, able to render custom content, forms or combined views.
Use it for contextual pop-ups, data-entry or to inform users in a consistent way with all other Mobiscroll component.
The Mobiscroll Popup control can be used as the <mobiscroll.Popup />
react component.
By default it renders a div element, and above the Popup options supports the following props:
Prop | Type | mobiscroll.PopupDescription |
---|---|---|
className | string | Used to add css classes to the rendered div element |
/* inside your component */
showPopup: function() {
this.refs.myPopup.instance.show();
},
render: function() {
return <div>
<button onClick={this.showPopup}>Show my popup</button>
<mobiscroll.Popup theme="mobiscroll-dark" display="center" ref='myPopup'>
<h3 className="md-text-center">Hi</h3>
<p className="md-text-center">Are you feeling good today?</p>
</mobiscroll.Popup>
</div>;
}
For many more examples - simple and complex use-cases - check out the popup demos for react.
Options
Name | Type | Default value | Description |
---|---|---|---|
anchor | String, HTMLElement | undefined |
Specifies the anchor element for positioning, if display is set to
'bubble'
.
If undefined, it defaults to the element on which the component was initialized.
|
animate | String or Boolean | undefined |
Animation to use for show/hide (if display is not inline). Possible values:
false , turns the animation off.
|
buttons | Array |
['ok']
|
Buttons to display. Each item in the array will be a button. A button can be specified as a string, or as a button object.
If a string, it must be one of the predefined buttons:
If an object, it may have the following properties:
Predefined and custom buttons example
Predefined button handler example
|
closeOnOverlayTap | Boolean | true |
If true, the popup is closed on overlay tap/click. |
context | String, HTMLElement | 'body' |
The DOM element in which the component is appended and positioned (if not inline). Can be a selector string or a DOM element. |
cssClass | String | undefined |
Applies custom css class to the top level element.
The
mbsc-no-padding class removes the padding around another component inside the popup. |
disabled | Boolean | false |
Initial disabled state of the component. This will take no effect in inline display mode. |
display | String | 'center' |
Controls the positioning of the component. Possible options:
|
focusOnClose | Boolean, String, HTMLElement |
true
|
Element to focus after the popup is closed.
If undefined , the original element will be focused.
If false , no focusing will occur.
|
focusTrap | Boolean | true |
If not in inline mode, focus won't be allowed to leave the popup. |
headerText | String | undefined |
Text to display in the header. |
layout | String | undefined |
Sets the layout of the component. Possible values:
|
maxWidth | Number, String | 600 |
Sets the maximum width of the component. |
responsive | Object | undefined |
Specify different settings for different container widths, in a form of an object,
where the keys are the name of the breakpoints, and the values are objects containing
the settings for the given breakpoint.
The available width is queried from the container element of the component and not the browsers viewport like in css media queries
There are five predefined breakpoints:
breakpoint
property specifying the min-width in pixels.
Example:
|
scrollLock | Boolean | true |
Disables page scrolling on touchmove (if not in inline mode, and popup height is less than window height). |
showOnFocus | Boolean |
false - on desktop
true - on mobile
|
Pops up the component on element focus. |
showOnTap | Boolean | true |
Pops up the component on element tap. |
showOverlay | Boolean | true |
Show or hide overlay. |
theme | String | undefined |
Sets the visual appearance of the component.
If it is If the theme for the specific platform is not present, it will default to the Mobiscroll theme. Supplied themes:
Starting from v4.9.0 setting directly the dark version of the theme is deprecated.
Use the themeVariant option instead to control the light / dark appearance of the theme.
Make sure that the theme you set is included in the downloaded package.
|
themeVariant | String | undefined |
Controls which variant of the theme will be used (light or dark). Possible values:
If not set, only the theme setting will determine which theme to use.
To use the option with custom themes, make sure to create two custom themes,
where the dark version has the same name as the light one, suffixed with
The option will not have any effect if the theme option explicitly
sets the dark version of a theme, e.g.
theme: 'ios-dark' .
|
touchUi | Boolean | true |
Use Can be used with the responsive option to change the user interface based on viewport width. |
Events
Name | Description | |
---|---|---|
onBeforeClose(event, inst) |
Triggered before the component closes. Close can be prevented by returning false from the handler function.
Parameters
Example
|
|
onBeforeShow(event, inst) |
Triggered before the component is shown.
It is useful if you want to modify the settings object before generating the markup.
It can be used also to prevent the showing the control by returning false.
Parameters
Example
|
|
onCancel(event, inst) |
Allows you to define your own event when cancel is pressed.
Parameters
Example
|
|
onClose(event, inst) |
Triggered when the component is closed.
Parameters
Example
|
|
onDestroy(event, inst) |
Triggered when the component is destroyed.
Parameters
Example
|
|
onInit(event, inst) |
Triggered when the component is initialized.
Parameters
Example
|
|
onMarkupReady(event, inst) |
Triggered when the html markup of the component is generated, but it is not yet shown.
It is useful, if you want to make modifications to the markup (e.g. add custom elements), before the positioning runs.
Parameters
Example
|
|
onPosition(event, inst) |
Triggered when the component is positioned (on initial show and resize / orientation change).
Useful if dimensions needs to be modified before the positioning happens, e.g. set a custom width or height. Custom positioning can also be implemented here, in this case, returning false from the handler
function will prevent the built in positioning.
Parameters
Example
|
|
onSet(event, inst) |
Triggered when the popup is closed using the "ok" button.
Parameters
Example
|
|
onShow(event, inst) |
Triggered when the component is shown.
Parameters
Example
|
Methods
Name | Description | |
---|---|---|
disable() |
Disables the popup.
ExampleMethods can be called on an instance. For more details see calling methods
|
|
enable() |
Enables the popup.
ExampleMethods can be called on an instance. For more details see calling methods
|
|
hide([ prevAnim ] [, btn ]) |
Hides the component.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
|
isVisible() |
Returns a boolean indicating whether the component is visible or not.
Returns: Boolean
ExampleMethods can be called on an instance. For more details see calling methods
|
|
option(options) |
Sets one or more options for the component.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
|
position([check]) |
Recalculates the position of the component (if not inline).
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
|
show([ prevAnim ] [, prevFocus ]) |
Shows the component.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
|
tap(el, handler) |
Attaches the handler function to the tap event of element el .
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
Localization
Name | Type | Default value | Description |
---|---|---|---|
cancelText | String | 'Cancel' |
Text for Cancel button. |
lang | String | 'en-US' |
Language of the component. Based on the language string the component loads the language based default settings from the
language modules.
Supported languages:
|
okText | String | 'Ok' |
Text for Ok button. |
rtl | Boolean | false |
Right to left display. |
Customizing the appearance
While the provided pre-built themes are enough in many use cases, most of the times on top of adapting to a specific platform, you'd also like to match a brand or color scheme. Mobiscroll provides various ways to achieve this:
- Create custom themes using the theme builder - the custom themes can be also built using out theme builder, on a graphical user interface, without any coding, or the need for Sass support in your project.
- Create custom themes using Sass - use this, if you need multiple themes with different color variatons, in case you have pages with different colors, or you'd like to users to customize the colors of your app.
- Override the Sass color variables - the straightforward way to change the colors in one place throughout the application.
Override the Sass Color Variables
A convenient way to customize the colors of the Mobiscroll components is to override the Sass color variables.
Let's say your branding uses a nice red accent color, and you'd like that color to appear on the Mobiscroll components as well,
while still using platform specific themes (e.g. ios
on iOS devices, material
on Android devices, and mobiscroll
on desktop).
You can override the accent color for every theme:
$mbsc-ios-accent: #e61d2a;
$mbsc-material-accent: #e61d2a;
$mbsc-mobiscroll-accent: #e61d2a;
@import "~@mobiscroll/React/dist/css/mobiscroll.react.scss"
You can also customize the colors on many levels:
- Theme specific variables (ex.
$mbsc-material-background
,$mbsc-ios-dark-text
) are applied to all components in a theme. Complete list of variables here. - Component specific global variables (ex.
$mbsc-card-background-light
,$mbsc-listview-text-dark
) are applied to all themes for a specific component. - Component and theme specific variables (ex.
$mbsc-ios-dark-form-background
,$mbsc-material-input-text
) are applied to a specific theme and a specific component.
Global variables
These variables are applied to all base themes: iOS, material, windows and mobiscroll.
They all come in pairs. One for the light and one for the dark variant in each theme.
Variable name | Description |
---|---|
$mbsc-frame-background-light | Sets the background color of the Popup |
$mbsc-frame-background-dark | |
$mbsc-frame-text-light | Sets the text color of the Popup |
$mbsc-frame-text-dark | |
$mbsc-frame-accent-light | Sets the accent color of the Popup |
$mbsc-frame-accent-dark | |
$mbsc-frame-overlay-light | Sets the color of the overlay, when the Popup is shown as a modal |
$mbsc-frame-overlay-dark |
If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:
iOS theme
Variable name | Default value | Description |
---|---|---|
$mbsc-ios-frame-background | #ffffff | The Popup background color |
$mbsc-ios-frame-text | #000000 | The Popup text color |
$mbsc-ios-frame-accent | #007bff | The Popup accent color |
$mbsc-ios-frame-overlay | rgba(0, 0, 0, 0.2) | Sets the color of the overlay, when the Popup is shown as a modal |
iOS Dark theme
$mbsc-ios-dark-frame-background | #0f0f0f | The Popup background color |
$mbsc-ios-dark-frame-text | #ffffff | The Popup text color |
$mbsc-ios-dark-frame-accent | #ff8400 | The Popup accent color |
$mbsc-ios-dark-frame-overlay | rgba(255, 255, 255, .1) | Sets the color of the overlay, when the Popup is shown as a modal |

Windows theme
Variable name | Default value | Description |
---|---|---|
$mbsc-windows-frame-background | #1a1a1a | The Popup background color |
$mbsc-windows-frame-text | #262626 | The Popup text color |
$mbsc-windows-frame-accent | #0078d7 | The Popup accent color |
$mbsc-windows-frame-overlay | rgba(0, 0, 0, .7) | Sets the color of the overlay, when the Popup is shown as a modal |
Windows Dark theme
Variable name | Default value | Description |
---|---|---|
$mbsc-windows-dark-frame-background | #191919 | The Popup background color |
$mbsc-windows-dark-frame-text | #ffffff | The Popup text color |
$mbsc-windows-dark-frame-accent | #0078d7 | The Popup accent color |
$mbsc-windows-dark-frame-overlay | rgba(0, 0, 0, .7) | Sets the color of the overlay, when the Popup is shown as a modal |

Material theme
Variable name | Default value | Description |
---|---|---|
$mbsc-material-frame-background | #eeeeee | The Popup background color |
$mbsc-material-frame-text | #5b5b5b | The Popup text color |
$mbsc-material-frame-accent | #009688 | The Popup accent color |
$mbsc-material-frame-overlay | rgba(0, 0, 0, .6) | Sets the color of the overlay, when the Popup is shown as a modal |
Material Dark theme
Variable name | Default value | Description |
---|---|---|
$mbsc-material-dark-frame-background | #303030 | The Popup background color |
$mbsc-material-dark-frame-text | #c2c2c2 | The Popup text color |
$mbsc-material-dark-frame-accent | #81ccc4 | The Popup accent color |
$mbsc-material-dark-frame-overlay | rgba(0, 0, 0, .6) | Sets the color of the overlay, when the Popup is shown as a modal |

Mobiscroll theme
Variable name | Default value | Description |
---|---|---|
$mbsc-mobiscroll-frame-background | #f7f7f7 | The Popup background color |
$mbsc-mobiscroll-frame-text | #454545 | The Popup text color |
$mbsc-mobiscroll-frame-accent | #4eccc4 | The Popup accent color |
$mbsc-mobiscroll-frame-overlay | rgba(0, 0, 0, .7) | Sets the color of the overlay, when the Popup is shown as a modal |
Mobiscroll Dark theme
Variable name | Default value | Description |
---|---|---|
$mbsc-mobiscroll-dark-frame-background | #263238 | The Popup background color |
$mbsc-mobiscroll-dark-frame-text | #f7f7f7 | The Popup text color |
$mbsc-mobiscroll-dark-frame-accent | #4fccc4 | The Popup accent color |
$mbsc-mobiscroll-dark-frame-overlay | rgba(0, 0, 0, .7) | Sets the color of the overlay, when the Popup is shown as a modal |
