Popup
Widget

A floating Popup widget, which can contain child widgets or plain html. Serves as the base class for Menu / Tooltip.

When it contains focus, the Escape key closes the picker. When it hides, focus is reverted to the element from which it entered the Popup, or, if that is no longer focusable, a close relative of that element.

const popup = new Popup({
  forElement : document.querySelector('button'),
  items      : {
    text : { type : 'text', placeholder: 'Text' },
    button : { type: 'button', text: 'Okay', style: 'width: 100%', color: 'b-orange'}
  }
});

Dragging & Resizing

Popups can be resized and dragged around the screen. To enable resizing, set the resizable config to true or an object with specific options. To enable dragging, set the draggable config to true.

For example:

const popup = new Popup({
   draggable : true,
   resizable : {
      handles : {
         top  : false,
         minWidth : 100
      }
   }
});

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

autoClose : Booleantrue

By default, a Popup is transient, and will close when the user clicks or taps outside its owned widgets and when focus moves outside its owned widgets.

Note: Modal popups won't close when focus moves outside even if autoClose is true.

Configure as false to make a Popup non-transient.
autoShow : Booleantrue

Auto show flag for Popup. If truthy then Popup is shown automatically upon hover.
closable : Booleanfalse

Show a tool in the header to close this Popup. The tool is available in the tools object under the name close. It uses the CSS class b-popup-close to apply a default close icon. This may be customized with your own CSS rules.
closeAction : 'hide'/'destroy'hide

The action to take when calling the close method. By default, the popup is hidden.

This may be set to 'destroy' to destroy the popup upon close.
closeOnEscape : Booleantrue

Close popup when Escape key is pressed.
focusOnToFront : Booleantrue

By default a Popup is focused when it is shown. Configure this as false to prevent automatic focus on show.
forElement : HTMLElement

DOM element to attach popup.
maximizable : Booleanfalse

Show a tool in the header to maximize this popup
modal : Boolean/Objectfalse
Optionally show an opaque mask below this Popup when shown. Configure this as true to show the mask.

When a Popup is modal, it defaults to being centered. Also, it won't close when focus moves outside even if autoClose is true.

The default action is to focus the popup.

Usage:
```
new Popup({
    title  : 'I am modal',
    modal  : {
        closeOnMaskTap : true
    },
    height : 100,
    width  : 200
});
```
- closeOnMaskTap : Booleanfalse
  
  Specify as true to close when mask is tapped.
- transparent : Booleanfalse
  
  Specify as true to use a transparent mask.
showOnClick : Boolean/Numberfalse

Show popup when user clicks the element that it is anchored to. Cannot be combined with showOnHover. Can also be provided as the button number (0: main button, 2: right button).
trapFocus : Booleantrue

By default, tabbing within a Popup is circular - that is it does not exit. Configure this as false to allow tabbing out of the Popup.
draggable : Boolean/Objecttrue
Set to false to prevent dragging the popup element.
- handleSelector : String
  
  CSS selector used to determine if a drag operation can be started from a mouse-downed element inside the popup
maximized : Booleanfalse

Set to true to make this widget take all available space in the visible viewport.

Has a corresponding runtime maximized property.

Properties

Properties are getters/setters or publicly accessible variables on this class

modalMask : HTMLElement

internal

READONLY

static

Returns the modal mask element. It does NOT guarantee its placement in the DOM relative to any Popup. To get the modal mask for a particular Popup, use the instance property.
isPopup : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of Popup class, or subclass thereof.

modalMask : HTMLElement

internal

READONLY

Returns the modal mask element for this Popup correctly positioned just below this Popup.
isPopup : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of Popup class, or subclass thereof.
maximized : Boolean

Set to true to make this widget take all available space in the visible viewport.

Has a corresponding maximized config.

Functions

Functions are methods available for calling on the class

close( )
: Promise

ASYNC

Performs the configured closeAction upon this popup. By default, the popup hides. The closeAction may be configured as 'destroy'.

Triggers: beforeClose

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeClose

ASYNC

PREVENTABLE

Fired when the close method is called and the popup is not hidden. May be vetoed by returning false from a handler.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeClose

ASYNC

PREVENTABLE

Called when the close method is called and the popup is not hidden. May be vetoed by returning false from a handler.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-modal-mask-background	Popup mask background-color (for modal popups)
--b-popup-background	Popup background-color
--b-popup-border	Popup border
--b-popup-border-radius	Popup border-radius
--b-popup-close-icon-content	Content for the close icon pseudo element (font icon)
--b-popup-maximize-icon-content	Content for the close icon pseudo element (font icon)
--b-popup-padding	Popup padding
--b-popup-text-popup-width	Popup width for text popups

Popup
Widget

Dragging & Resizing

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree5

Mixins8

Contents

Popup Widget

Dragging & Resizing

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree5

Mixins8

Contents

Popup
Widget