popup

Example 1: Simple popup

If you want an element to trigger a popup, give it the class .tb-popup-trigger
When the element is clicked, the script will look inside the same parent element for an element with the class .tb-popup. This is the popup content.
On every page there is an element with the id #tb-popup which is hidden by default. This element is made visible when a popup is triggered, and the popup content is rendered inside this element.

Code

<div class="tb-popup-trigger" style="background: yellow;">
    <p>Click me to open a popup.</p>
    <div class="tb-popup tb-popup-with-padding">
        <div class="tb-popup-content">
            <p>This is the popup content.</p>
        </div>
    </div>
</div>

Result

Example 2: Popup with image

Related components:

image

Code

<div class="tb-popup-trigger">
    <span class="tb-button">Click me to open a popup.</span>
    <div class="tb-popup">
        <div class="tb-image-part">
            <?= tb_render_image(1010) ?>
        </div>
    </div>
</div>

Result

Example 3: Popup with navigation

Sometimes it makes sense to go to the next popup in a series without having to close the popup.
This can be done by adding <?= tb_render_popup_nav() ?> at the bottom of the popup content.

You can pass 2 arguments to this function: tb_render_popup_nav($prev_text, $next_text)
Make sure to localize the text with __tb($text)

When a user clicks next, the script will find the next sibling of the parent element (i.e. the element with the class .tb-popup-trigger), and then swap the content. The next button is only rendered if there is a next sibling.
The same logic applies to the previous button.

Related demo blocks:

dayschedule

Code

<?php
    $fields = [ 'entries' => [
        [ 'image' => 1010, 'title' => 'Astronaut' ],
        [ 'image' => 1020, 'title' => 'Craters' ],
        [ 'image' => 1030, 'title' => 'More craters' ],
        [ 'image' => 1040, 'title' => 'Outer space' ],
        [ 'image' => 1050, 'title' => 'The moon' ],
    ]];
?>

<?php if ( is_array( $fields['entries'] ) ) { ?>
    <div class="tb-buttons-part">
        <?php foreach ( $fields['entries'] as $i => $entry ) { ?>
                <div class="tb-button tb-popup-trigger">
                    <?= $i+1 ?>. <?= $entry['title'] ?>
                    <div class="tb-popup">
                        <div class="tb-image-part">
                            <?= tb_render_image($entry['image']) ?>
                        </div>
                        <div class="tb-popup-content">
                            <p><?= $entry['title'] ?></p>
                            <?= tb_render_popup_nav(__tb('Previous'), __tb('Next')) ?>
                        </div>
                    </div>
                </div>
        <?php } ?>
    </div>
<?php } ?>