Tagged: jQuery, pop-up, team member
I have a custom jQuery div inside of the team member description element which pop’s up once the corresponding button is clicked.
However, when the screen size is reduced the content does not overflow, and the scrollbar doesn’t work.
Here is the function:
//add pop-up window to team members
function inline_popup_enabler(){
?>
<script>
(function($){
$(window).load(function() {
$(‘.inline_popup’).magnificPopup({
type:’inline’,
midClick: true
});
});
})(jQuery);
</script>
<?php
}
add_action(‘wp_footer’, ‘inline_popup_enabler’);
Here are the styles:
.mfp-container .hidden {
font-size: 18px;
position: fixed;
top: 5%;
border-top: 20px solid #00afb9;
border-bottom: 5px solid #00afb9;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
visibility: visible;
width: 95%;
margin: 0 auto !important;
background: #FFFFFF;
color: #181818;
padding: 25px;
overflow-y: scroll !important;
}
This is a site link:
(www.test5.31stline.com/about)