pop-above
v1.0.1
Published
pop_above is a tool to create a custom popup above anything.
Downloads
6
Readme
Pop_above
Pop_above is a tool to easily create one popUp above any div. That pop up can be easily styled but any way it comes with a own style.
Screenshots
Showing pop up
hidden pop Up
Instalation
You can install pop above with the following command
npm i pop-above
Documentation
To add a pop up with pop above you first need to create one div, in HTML file, with position relative and a one id to use this id to localize the div with js (you can style this div however you want).
<div id="pop_here" style="position : relative">
<p>
hover-me to see the pop up
</p>
</div>
In js file you need to import the pop_above
import pop_above from "pop_above";
pop_above will have 4 arguments and they are :
- elementID
- elementID is the id which have been created previosly and is where the pop up will appear above
- content
- content is the html content that will appear inside the pop up
- pxAbove
- pxAbove is the amount of pixels which is between the div and the pop up
- backgroundColor
- backgroundColor is the background color of the pop up
First its necessary inicialize the pop Up
let content = `
<p>Im a pop up text</p>
<button>Im a pop up button</button>
`;
let backgroundColor = "rgb(48, 17, 120)";
let popUp = new pop_above ("pop_here", content, 40 backgroundColor);
To add a class to pop up for css customization is necessaty add a class to it
popUp.defineClassName ("popUp_class");
to activate the pop up is necessary to use the activePopUp()
popUp.activePopUp();
Author
Mccartheney
- linkedIn - Mccartheney Mendes
- github - Mccartheney Mendes
- Frontend Mentor - @mccartheney