Open an Element in a PopUp/LightBox upon click of a Button

Hi,
I have three buttons on one page, each should open to view that person’s bio.

I’ve placed this code into the functions.php file in my child theme, which I obtained from the forum:
/*——————————————————————————-
INLINE POP UP ENABLER
——————————————————————————-*/
function popup_inline() { ?>
<script type=”text/javascript”>
jQuery(window).load(function(){
jQuery(‘.pu-link a’).addClass(‘open-popup-link’);
jQuery(‘.open-popup-link’).magnificPopup({
type:’inline’,
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don’t provide alternative source in href.
});
});
</script>
<?php }

add_action(‘wp_head’, ‘popup_inline’);

• My Buttons have this CSS Class: pu-link
• Then I have a section on the page with each of the 3 Bios and I’ve created a middle column for each – wanted them centered when they popup. Each column with each bio has it’s own id – with their names, and then the custom css class “mfp-hide” – also gave the section the class mfp-hide, So they are hidden and do appear on pop up.

Two things I wonder if you could help me fix:

1. When you click on the buttons, while the popup is appearing, the website behind the popup scrolls up behind it – not sure why it’s doing that but would like to remove that, stop it from doing that. And on a cell phone it scrolls up to the top of the website with an overlay on top, then you have to scroll back down to the pop up, which also isn’t appearing on the whold screen, like left 2/3rds.

2. All 3 Pop Ups appear on the left instead of centered – even though I’ve made it a 3/5th column in the middle of two 1/5ths. Is there a way to center these like a typical popup?

I fear I’ve missed an important step to getting htis all working properly and wonder if it has to do with the css which I did not find related to .mfp-hide?

Thank you