Example of our HTML used for Global Popup

example.html

<div data-test="collection-editors">
    <h2 class="app-section__heading u-mb-16">Editors</h2>
    <ul class="c-collection-editors">
        <li class="c-collection-editors__item">
            <div class="c-collection-editors__name-container">
                    <span class="c-collection-editors__name">
                        <a data-test="author-name" data-track="click" data-track-action="open collection editor bio"
                           data-track-label="link"
                           href="#collection-editor-0" data-popup data-popup-min-width="300px"
                           data-popup-max-width="650px" data-popup-target="collection-editor-0">Stefanie Reichert
                        </a>
                    </span>
                <span class="c-collection-editors__comma">,&nbsp;</span>
            </div>
            <div class="c-popup c-collection-editor__popup u-js-hide u-mb-16" tabindex="0" id="collection-editor-0">
                <section data-test="guest-editor-bio">
                    <h3>Stefanie Reichert</h3>
                    <p>Senior Editor, Nature Physics</p>
                </section>
            </div>
        </li>
        <li class="c-collection-editors__item">
            <div class="c-collection-editors__name-container">
                    <span class="c-collection-editors__name">
                        <a data-test="author-name" data-track="click" data-track-action="open collection editor bio"
                           data-track-label="link"
                           href="#collection-editor-1" data-popup data-popup-min-width="300px"
                           data-popup-max-width="650px" data-popup-target="collection-editor-1">Federico Levi
                        </a>
                    </span>
                <span class="c-collection-editors__ampersand">&nbsp;&amp;</span>
            </div>
            <div class="c-popup c-collection-editor__popup u-js-hide u-mb-16" tabindex="0" id="collection-editor-1">
                <section data-test="guest-editor-bio">
                    <h3>Federico Levi</h3>
                    <p>Senior Editor & Team Manager, Nature</p>
                </section>
            </div>
        </li>
        <li class="c-collection-editors__item">
            <div class="c-collection-editors__name-container">
                    <span class="c-collection-editors__name">
                        <a data-test="author-name" data-track="click" data-track-action="open collection editor bio"
                           data-track-label="link"
                           href="#collection-editor-2" data-popup data-popup-min-width="300px"
                           data-popup-max-width="650px" data-popup-target="collection-editor-2">Iulia Georgescu
                        </a>
                    </span>
            </div>
            <div class="c-popup c-collection-editor__popup u-js-hide u-mb-16" tabindex="0" id="collection-editor-2">
                <section data-test="guest-editor-bio">
                    <h3>Iulia Georgescu</h3>
                    <p>Chief Editor, Nature Reviews Physics</p>
                </section>
            </div>
        </li>
    </ul>
</div>