There is a block:

<div data-index="24" style="border-radius: 0px; padding: 20px; background: none 0% 0% repeat scroll rgb(0, 0, 0); transform: scale(0, 0); transition-property: -moz-transform; transform-origin: 0% 50% 0px; width: 380px; left: 563.906px; top: 321.188px; display: block;" class="hs-tooltip"> <div style="border-right-color: rgba(0, 0, 0, 1);" class="hs-arrow hs-arrow-left"></div> <div class="hs-tooltip-buffer hs-tooltip-buffer-left "></div> <h3 style="color: #2b2a2c;font-size: 20px;font-family: sans-serif;font-weight: 700;line-height: 30px;margin-bottom: 20px;">Infused Chocolate</h3> <p style="color: #2b2a2c;font-size: 15px;font-family: serif;font-weight: 300;line-height: 25px;"><img src="/wp-content/uploads/2016/07/Image-28-Chocolates.jpg"><br>Discover a wide selection of infused chocolates, including major brands and artisan pieces in both traditional doses and microdoses.<br><a href="#">View The Menu</a></p><i class="close"></i> </div>

It is displayed as a popup, it is necessary that it is always displayed in the center of the browser window. Its width is fixed 380px, height - dynamic. It is also necessary that when scrolling up or down, he hid.

I did it, it does not work

 .homepage .pin-overlay + .hs-tooltip { position: fixed; top: 50%!important; left: 50%!important; margin-top: -25%; margin-left: -190px; }

I have even found:

  • window.innerWidth; // returns the width of the window
  • window.innerHeight; // returns the height of the window

center will most likely return window.innerWidth / 2; and window.innerHeight / 2;

  • If the width is fixed - it is best not to position absolutely or fixed - left: 50%; margin-left: 190px ;? - klifort
  • I did it, but for some reason it is still positioned relative to the height of the section - eugene_v
  • fixed here is meaningless, because you need to hide when scrolling. Must be absolutely positioned - Klimenkomud
  • I tried to make styles, but did not achieve the result, so I decided that it would save me in this case JS by calculating the height and width of the screen - eugene_v
  • um .. you can just write in the styles left: calc (50% - 190px) without any margin or scripts there - Michael

2 answers 2

It is done without js, using css tools:

 .name{ transform: translate(50%,50%); position: absolute; top:50%; left: 50%; }

The block itself must be located outside the sections with explicit positioning (absolute, relative, fixed), otherwise it will be positioned relative to them.

It is best to place such blocks on top of the DOM, for example, before closing the body tag.

Such class chains are not a good approach. I recommend to get acquainted with something like BEM

  • In this case, there is no such possibility to take out of the section, there the wp plugin creates points, each of the points has its own coordinates, the section height is about 1700px, there are about 20 such points and each has its own popup - eugene_v
  • @eugene_v then you can change top:50% to top:50vh . I do not fully understand your problem, but it seems to me that it might work. - Vitamine_R
  • I understand that it is difficult to understand. That's why I think that if you write JS and use JS properties to get the width and height of the screen, having this data position the block and add a block of code to the block to hide it while scrolling. I imagine it so - eugene_v

 var $block = $("#block"), ww = $(window).width(), // $("window").width() wh = $(window).height(); // $("window").heigth() $block.offset({ 'top' : wh / 2 - $block.height() / 2, 'left' : ww /2 - $block.width() / 2 }); 
 #block{ width:25px; height:25px; background-color:lightgreen; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="block"></div>