This polyfills the HTML popUp
attribute and showPopUp
/hidePopUp
methods onto HTMLElement.
The simplest, recommended way to install the polyfill is to copy it into your project.
Download popup.iife.min.js
from
unpkg.com and add it
to the appropriate directory in your project. Then, include it where necessary
with a <script>
tag:
<script src="/path/to/popup.iife.min.js" type="module"></script>
You will also likely need the CSS file, which supplies some default styles.
Download the popup.css
from
unpkg.com and add it
to the appropriate directory in your project. Then, include it where necessary
with a <link rel=stylesheet>
tag:
<link rel="stylesheet" src="/path/to/popup.css">
For more advanced configuration, you can install with npm:
npm install @oddbird/popup-polyfill
After installing, you’ll need to use appropriate tooling to use
node_modules/@oddbird/popup-polyfill/dist/index.js
(or .min.js
).
You will also likely need to include the CSS stylesheet which is found in
node_modules/@oddbird/popup-polyfill/dist/popup.css
.
If you want to manually apply the polyfill, you can also import the
isSupported
and apply
functions from
node_modules/@oddbird/popup-polyfill/dist/popup.js
file.
For prototyping or testing, you can use the npm package via a Content Delivery Network. Avoid using JavaScript CDNs in production, for many good reasons such as performance and robustness.
<script
src="https://cdn.jsdelivr.net/npm/@oddbird/popup-polyfill@latest"
crossorigin="anonymous"
defer
></script>
After installation the polyfill will automatically add the correct methods and attributes to the HTMLElement class.
Visit our contribution guidelines.