How to show popup center on screen

Question

I have a list of products and when i click in each product shows a popup but this popup shows in top of the page and the opacity is not in all screen.

My popup:

  $('.image-sample').click(function(data) { var image = $(this).attr('data-image'); $.get("/sample-image/"+ image, function(data) { $(".popup").html(''); $(".popup").append(data); $('.opacity').show(); $('.popup').show(); closeNews(); }); }); 

 .popup { position: absolute; width: 100%; height: 100%; display: none; z-index: 1000 !important; overflow: hidden; } .opacity { position: absolute; width: 100%; height: 100%; background-color: grey; opacity: 0.5; z-index: 998; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="popup"></div> <div class="opacity"></div> 

It allow scroll when popup shows and shouldn't.

What i want is center the popup in screen and have the opacity in all screen.

What is my problem?

Thank you

Answer 1

1. Opacity animation issue: if you use display:none in css animation with opacity wouldnt work so i advice use in jquery not the $('.popup').show(); but fadeIn and fadeOut - $('.opacity').fadeIn(300);

2. Use position: fixed; not the absolute for the popup blocks (.popup, .overflow);

3. The scrolling you can hide toggling with jquery to the body class or style which hides overflow and setting max-height:100%;