popperupper
This is a small project to add a button to any page that launches an app in a modal iframe.
Development
Run npm install and npm run build before using the code from source.
Usage
Example page Some content appearing before the button Some content appearing after the button Options
Options can be specified as data attributes on the script element.
| Attribute | Description | Default |
|---|---|---|
| data-url | URL of the app to load in the iframe | '' |
| data-label | Label of the button | 'Launch external application' |
| data-class | Space separated classes to be applied to the button | '' |
Controlling the modal with the app
From the application mounted within the modal, the modal itself can be resized or closed. To do this and remain cross-origin safe, it uses iframe-resizer. Once you have this dependency installed, instatiate it using the code below (some linting rules may need to be disabled).
; // This needs to be referenced so it isn't tree-shaken.iframeResizerContentWindow;The resize logic will look for an element with the tag [data-iframe-height] and use its height to resize the modal window.
You can close the modal window from the application by dispatching the following message
windowparentIFrame;In TypeScript you may need to replace window with (<any>window) for it to allow parentIFrame.