dev-epau.archi.fr/user/themes/epau-antimatter/templates/modular/personnes.html.twig

<script>

var message = {{ page.media[personne.biographie].url|e }};
$(".bouton").click(function(){

     $("#modal .message").html('message');

     $("#modal").addClass("open");
     // $("#body").addClass("grey");

});

$("#modal .mask, #modal a.close").click(function(){
     $("#modal").removeClass("open");
     return false;
});
</script>


<div id="mozaique_personnes{{ page.header.class}}">
    {{ content|raw }}


    {% for personne in page.header.personnes %}

      <!-- <div class="personne"> -->
        <div class="mozaique">
            <div class="portait">
              {% if personne.portrait %}
                <img src="{{page.media[personne.portrait].url|e }}" alt="portrait de {{personne.nom}}" />
              {% endif %}
            </div>
            <div class="info">
                {% if personne.nom %}
                <h5>{{ personne.nom }}</h5>
                {% endif %}
                {% if personne.fonction %}
                <h6>{{ personne.fonction }}</h6>
                {% endif %}
                <button class="bouton">Voir biographie</button>
            </div>
                <div id="modal">
                	<div class="mask">
                  	<div class="container">
                  		<div class="message">
                        {% if personne.biographie %}
                        <p>{{ personne.biographie|markdown }} </p>
                        {% endif %}

                      </div>
                  		<a href="#" class="close">&times;</a>
                    </div>

                  </div>
              	</div>

        </div>


      <!-- </div> -->

    {% endfor %}

</div>