There are two parts to modal: the displayed content (modal), and the trigger that tells the browser to display it.
1.) The code for the modal itself should be written into a place that makes logical sense in the flow of information. The person profile lava is looping through family members (Group Member objects.), and adds a modal for each:
<div class="modal fade" id="{{ familyMember.Person.FullName | ToCssClass }}Missions" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">{{ familyMember.Person.FullName }}: Missions</h4>
</div>
<div class="modal-body">
{% comment %} Check for child membership in fundraiser group type{% endcomment %}
{% assign externalsite = 'Global' | Attribute:'PublicApplicationRoot' %}
{% assign missionMembers = familyMember.Person | Groups:'31','All' %}
{% assign size = missionMembers | Size %}
{% if size != 0 and size != null and size != empty %}
{% comment %}cycle through Group Member objects and create impersonation token link to their profile{% endcomment %}
{% for member in missionMembers %}
{% assign groupId = member.GroupId %}
<li class="list-group-item">
<a href="{{ externalsite }}/page/638?GroupId={{ groupId }}&GroupMemberId={{ member.Id }}&rckipid={{ familyMember.Person | PersonTokenCreate:1440,10,null }}" class="js-group-item" >{{ member.Group.Name }}</a>
</li>
{% endfor %}
{% endif %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% comment %}end Mission Trip modal structure{% endcomment %}
2.) The Trigger: we will now add a button that uses html attributes to toggle the modal when the button is clicked. In the first line of the modal structure, we set a unique Id using a special lava filter: 'ToCssClass'. Everyone will have their own modal that the code named after them.
<div class="modal fade" id="{{ familyMember.Person.FullName | ToCssClass }}Missions" ...
Now we can specify which modal should get triggered based on the data-toggle and data-target attributes (not the same as rock attributes)
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-primary btn-reg" type="button" href="#" data-toggle="modal" data-target="#{{ familyMember.Person.FullName | ToCssClass }}Missions" >Missions</button>
</div>
</div>