text in popup

can you try this in your child-theme functions.php:

function inline_popup_for_toggles() { 
?>
<script type="text/javascript">
(function($){
	$(window).on('load', function(){

		$('#people .toggler').off('click');

		$('#people .single_toggle').each(function() {
		    $(this).magnificPopup({
				type:'inline',
				midClick: true,
				items: {
					src: $(this).find('.toggle_content').addClass('white-popup'),
				}
		    });
		});
	});
})(jQuery);
</script>
<?php 
}
add_action('wp_footer', 'inline_popup_for_toggles');

and this in quick css:

.mfp-content  .white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 800px;
  margin: 50px auto;
}

you see that selector – it is only for your ID set by yourself: #people
so if you like to have that on different places you had to adjust that selector –
PS: the .off(‘click’) removes the initial event on the toggles

Comming soon …
I just wanted to ask before investing time in a solution again and then not producing what you wanted to have after all.

PS : that part:

/****  
// re-appends controls inside the main container
		callbacks: {
		  buildControls: function() {
			this.arrowLeft.appendTo(this.contentContainer);
			this.arrowRight.appendTo(this.contentContainer);
		  },
		},
****/

if you like to have that – just get rid of those two lines with those asterisks

you can completely remove. This is only to have the left and right arrows inside the mfp-content container.

PPS:
if you are loading your jQuery in the footer do not forget to set a priority for that function in the last line:
add_action( 'wp_footer', 'button_for_biography', 999 );

and to have the image of your team-member inside the lightbox – just place the image into your text-block ( that with the mfp-hide class ) – on my test it is a float left setting.

it is probably not necessary to mention that the Gallery option is prevented by setting it to false.

for that fading you have to insert that mainClass:

Edit: see next posting

( PS : you can try here like Mike did in the other topic with native eventListener DOMContentLoaded – but window on load will work too )

and in additon to quick css:

.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

and if you like to have between the items on gallery mode a fading – replace white-popup rule with :

.mfp-content .white-popup {
	position: relative;
	background: #FFF;
	padding: 40px;
	width: auto;
	max-width: 800px;
	margin: 50px auto;
	-webkit-animation: .3s fadeIn both;
	animation: .3s fadeIn both;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

You don’t have the need to insert links to the images – the code above will do – but to see that there is a link on the image:

#people .avia_image[href^="#"] {
	cursor: pointer;
}
#people .avia_image[href^="#"]:hover {
  box-shadow: 0 0 10px -3px #333;
  -webkit-transform: scale(1.05); 
  transform: scale(1.05);
}

see again: https://enfold.webers-webdesign.de/sky19er/

just put in the mainClass the enfold class: avia-popup
( mainClass: 'avia-popup mfp-fade', ) and to better select that popup maybe we put in an additonal class f.e.: people

function button_for_biography(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () {	
	(function($) {
		$('#people').each(function(){
		var that = this;
			$('.flex_column', this).each(function(i){
				if($(this).find('.mfp-hide').length){
					$(this).find('.avia-button').attr('href','#bio-'+(i+1)).addClass('no-scroll');
					$(this).find('.avia_image').attr('href','#bio-'+(i+1)).addClass('no-scroll');
					$(this).find('.mfp-hide').attr('id','bio-'+(i+1)).addClass('white-popup');
				}
			});
		});

		$('#people .flex_column').find('.avia-button[href^="#bio-"]').magnificPopup({
			type:'inline',
			midClick: true,
			removalDelay: 500,
			mainClass: 'avia-popup mfp-fade people',
			gallery: { 
				enabled:true,
			},
		});

		$('#people .flex_column').find('.avia_image[href^="#bio-"]').magnificPopup({
			type:'inline',
			midClick: true,
			removalDelay: 500,
			mainClass: 'avia-popup mfp-fade people',
			gallery: { 
				enabled:true,
			},
		});

	})(jQuery);
}); 	
</script>
<?php
}
add_action( 'wp_footer', 'button_for_biography');

now we can influence that close button “X” only for that popup (people) by:

div.avia-popup.people .mfp-close {
  right: -5px;
  top: -45px;
  color: #fff;
}

yes – you can do that – or leave all as it is with buttons – and just remove the button styling on that:

body #people .avia-button {
  color: #000 !important;
  background-color: transparent;
  border-radius: none;
  padding: 0;
  font-size: 16px;
  border-bottom: none;
  text-align: left;
  background-color: transparent;
}

body #people .avia-button:before {
  content:"+ "
}

body #people .avia-button:active {
  outline: none;
  border: none;
}