Modal window

Last updated: 24/04/2023

Overview

Modal windows are message boxes that are activated to display additional information or features without leaving the current page. On the Publications Office portal, we use a modal based on the Bootstrap CSS framework.

Click on the button below to see a modal demo.

How to implement

Copy and paste the code below into your web page. To customise, replace with your content and values:

• For the link or button trigger: data-target="#modal-example-1"
• For the modal: id="modal-example-1" aria-labelledby="modal-title-example-1"
• For the modal title: id="modal-title-example-1"

The code for button or link that triggers the modal:

<a class="gs-btn gs-btn-main" data-target="#modal-example-1" data-toggle="modal" href="#" onclick="gsOpenModal(this)" role="button">Open modal</a>

The code for the modal:

<div id="modal-example-1" aria-hidden="true" aria-labelledby="modal-title-example-1" class="modal op-modal fade"  role="dialog" style="display: none;" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="gs-modal-header-wrapper">
                <h2 id="modal-title-example-1">Example modal window title</h2>
                <a aria-label="Close" class="gs-btn gs-btn-ghost" data-dismiss="modal" href="#" role="button" style="justify-self: end;"><i aria-hidden="true" class="gs-icon-close"></i> </a>
            </div>
            <div class="gs-modal-body">
                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut tortor non risus mollis porta. Quisque lectus ex, facilisis in eros ac, rhoncus imperdiet nibh. Nam aliquet tincidunt accumsan. Vestibulum diam urna, sagittis vel scelerisque ac, dignissim et ante. Cras ornare nunc et odio congue, vitae bibendum tellus consectetur.</p>
                <a class="gs-btn gs-btn-sec" href="#" target="_blank">Button example</a>
            </div>
        </div>
    </div>
</div>