CODEWITHSUNDEEP
jquerycsspopup
sigug
sigug

Reputation: 1179

Popup box centered on visible screen (also scrolled down)

I have a popup box that opens/show when clicking or hovering over a href anchor. It shows in the center of the page. When you are scrolling down or on mobile it doesn't work anymore because the popup shows at the "top" (centered), but not the center of the current view.

I tried with css

.modal-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

and javascript

$(window).resize(function() {
    $(".modal-box").css({
        top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
        left: ($(window).width() - $(".modal-box").outerWidth()) / 2
    });
});
 
$(window).resize();

Both do the effect mentioned above (centering) but not when scrolled a bit further... Is there a way to fix that? Or would it better to use some plugin (lightbox or whatever) to do this?

Upvotes: 0

Views: 213

Answers (1)

Sudipto Roy
Sudipto Roy

Reputation: 1046

Your css (as well as js) is correct. Choose the CSS solution as it is more optimized. Is there some css at any of the parent of the .modal-box which makes it to scroll?

your code works correct here: https://jsfiddle.net/w1k5aLe7/

Upvotes: 2

Related Questions