Reputation: 55
I come from a C# background so bear with me I already know the way I'm going about this isn't ideal:
But I need to do this:
Create a centered popup that scrolls with the page when the user clicks on some text the code must be embedded JavaScript in a HTML page(s), nothing server side (other than maybe css).
-preferably text links to popups need to be reusable I don't want to embed a bunch of code each for each link.
-I've looked at a lot of "pop-up" tutorials/exmaples but since I need embedded client side javascript it limits what works.
The result I would like to have a webpage with premade popups that I can reference from other webpages like OpenPopup(webpage.getElement(popupNumber12)) or have arrays with popup titles, descriptions that I can pass though.
Upvotes: 0
Views: 31
Reputation: 304
Sounds like you're looking have to a modal rather than a popover since you don't want it to close after interacting with the page. I would just have a modal open with an onClick event and then describe its position as:
.modal {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
Assuming the width of the modal you want to display is 300px.
If you're working with SCSS
$width = 300px
$height = 300px
.modal {
width: $width;
height: $height;
position: absolute;
left: calc(50% - $width)
top: calc(50% - $height)
}
Upvotes: 1