CODEWITHSUNDEEP
javascript
FirefightGI
FirefightGI

Reputation: 55

How to create a centered popup of an element on another page

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

Answers (1)

demonintherough
demonintherough

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

Related Questions