---
title: "Javascript Popup Lifecycle events Example | Mobiscroll"
component: "Popup"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/popup/event-hooks"
---

# Lifecycle events - JavaScript Popup demo

Javascript Popup demo with event hooks for custom integration and functionality. Use event handlers to customize flows. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/popup/event-hooks)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/pickers/popup/event-hooks)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/popup/event-hooks.md), [Angular](https://demo.mobiscroll.com/angular/popup/event-hooks.md), [React](https://demo.mobiscroll.com/react/popup/event-hooks.md), [Vue](https://demo.mobiscroll.com/vue/popup/event-hooks.md)

## Description

The popover ships with different hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

While users interact with the UI events like `onInit`, `onOpen`, `onPosition` ... will be triggered.

**For a complete list of events go to the documentation** [See available lifecycle events →](https://mobiscroll.com/docs/javascript/popup/api#events)

## What this demo shows

- This demo shows a popup which can be opened and closed with buttons.
- **Opening and closing** Buttons programmatically open and close the popup.
- **Modal layout** The popup appears as a centered modal with a custom layout and content.
- **Custom content** The popup contains a custom image or logo, a heading, and descriptive text.
- **Close action** A `Close` and `oOk` button dismisses the popup.
- **Visual separation** A modal overlay and shadow separate the popup from the underlying content.
- **Event log** An Event log panel is shown on the left and lists the lifecycle events fired during interactions such as event creation, hover, drag, and similar actions.

## Best for

- **Lifecycle event discovery** Understanding which popup lifecycle hooks fire during common user interactions.

## Tutorial

```js
onClose: function (event, inst) { /* Your custom event handler goes here */ },
onDestroy: function (event, inst) { /* Your custom event handler goes here */ },
onInit: function (event, inst) { /* Logic running on component init */ },
onOpen: function (event, inst) { /* Your custom event handler goes here */ },
onPosition: function (event, inst) { /* Logic for component positioning */ },
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/popup/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/popup/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/javascript/popup/api#opt-display) - option
- [`anchor`](https://mobiscroll.com/docs/javascript/popup/api#opt-anchor) - option
- [`buttons`](https://mobiscroll.com/docs/javascript/popup/api#opt-buttons) - option
- [`onClose`](https://mobiscroll.com/docs/javascript/popup/api#event-onClose) - event
- [`onDestroy`](https://mobiscroll.com/docs/javascript/popup/api#event-onDestroy) - event
- [`onInit`](https://mobiscroll.com/docs/javascript/popup/api#event-onInit) - event
- [`onOpen`](https://mobiscroll.com/docs/javascript/popup/api#event-onOpen) - event
- [`onPosition`](https://mobiscroll.com/docs/javascript/popup/api#event-onPosition) - event
- [`open`](https://mobiscroll.com/docs/javascript/popup/api#method-open) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var popup = mobiscroll.popup('#demo-popup-hooks', {
  display: 'anchored',
  anchor: document.getElementById('demo-popup-open-btn'),
  buttons: ['ok', 'cancel'],
  onClose: function (args) {
    // Logic running on popup close
    console.log('onClose', args);
  },
  onDestroy: function (args) {
    // Logic running on component destroy
    console.log('onDestroy', args);
  },
  onInit: function (args) {
    // Logic running on component init
    console.log('onInit', args);
  },
  onOpen: function (args) {
    // Logic running on popup open
    console.log('onOpen', args);
  },
  onPosition: function (args) {
    // Logic for component positioning
    console.log('onPosition', args);
  },
});

document.getElementById('demo-popup-open-btn').addEventListener('click', function () {
  popup.open();
});
```

### HTML

```html
<div class="mbsc-form-group">
  <div class="mbsc-button-group-block">
    <button mbsc-button id="demo-popup-open-btn">Open popup</button>
  </div>
</div>
<div id="demo-popup-hooks" style="display:none;">
  <div class="mbsc-align-center mbsc-padding">
    <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg">
    <h4>Welcome to our website!</h4>
    <p>Have fun navigating through the demos.</p>
  </div>
</div>
```

### CSS

```css
/* style */
```

## Implementation notes

- The popup exposes five lifecycle events used in this demo: `onInit` (fires once when the popup instance is created), `onOpen` (fires when the popup starts opening), `onPosition` (fires whenever the popup is positioned/repositioned relative to its `anchor`, including during open and on scroll/resize), `onClose` (fires when the popup starts closing), and `onDestroy` (fires when the popup instance is destroyed).
- All five handlers receive `(event, inst)` in JS/jQuery - `event` carries hook-specific data and `inst` is the popup instance.
- `display: 'anchored'` combined with `anchor: <element>` anchors the popup below the triggering button so `onPosition` has something to report; `showOverlay: false` and `focusOnOpen: false` are demo-page display tweaks, not required for the events themselves.
- `buttons: [{ text: 'Ok', handler: 'set' }, 'cancel']` shows a custom-labeled button using the predefined `'set'` action alongside the predefined `'cancel'` button.
- Event wiring differs per framework: JS/jQuery pass `onInit`/`onOpen`/`onPosition`/`onClose`/`onDestroy` as function options inside `.popup({ ... })`; React binds them as `onInit`/`onOpen`/`onPosition`/`onClose`/`onDestroy` props on `<Popup>`, each taking a callback with no required arguments; Vue binds them as `@init`/`@open`/`@position`/`@close`/`@destroy` on `<MbscPopup>`; Angular binds them as `(onInit)`/`(onOpen)`/`(onPosition)`/`(onClose)`/`(onDestroy)` output bindings on `<mbsc-popup>`, each calling a component method.
- In React/Vue, opening is declarative: a boolean state (`isPopupOpen`/`isOpen`) drives the `isOpen`/`:isOpen` prop, and the `onClose`/`@close` handler is responsible for resetting that state to `false` - the popup does not close itself just because the lifecycle event fired.
- In JS/jQuery and Angular, opening/closing is imperative: JS captures the popup instance directly from the return value of `mobiscroll.popup(...)`; jQuery instead calls `.mobiscroll('getInst')` once to obtain it; either way, `.open()` is then called on it (e.g. from the trigger button's click handler); Angular keeps a `@ViewChild` reference to the `<mbsc-popup>` and calls `popup.open()`/`popup.close()` directly.
- The demo's event log panel appends one line per fired event, naming the event and linking to its API documentation entry - this logging is demo-page instrumentation, not a popup feature.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation