Modals and popups

Modal using jQuery

// Example modal using jQuery and magnificPopup.
// See http://dimsemenov.com/plugins/magnific-popup/ for documentation.

// See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role
// for notes on accessibility.

// #example-modal1 is the trigger in this case
// (the Click me! button)
$('#example-modal1').magnificPopup({
    items: {
        // In this example, we've directly embedded the modal content.
        // It could also be brought in from an existing element or via AJAX.
        // We'll use the brick--heavy styling.
        // The key piece of markup to add for a modal is the trigger to close it,
        // in this case a link with the class "modal-dismiss".
        // A listener will be added to it when the modal is opened. Clicking on
        // the trigger will then call magnificPopup.close().
        src: '<div class="brick brick--heavy brick--modal" role="dialog" aria-labelledby="example-modal1-title">\
                <div class="brick__wrapper">\
                    <h2 class="brick__title" id="example-modal1-title">Example modal title</h2>\
                    <p>Example modal popup content.</p>\
                    <div class="modal__actions">\
                        <a href="#" class="button modal-dismiss button--small button--secondary" role="button">Close</a>\
                    </div>\
                </div>\
             </div>',
        type: 'inline'
    },
    modal: true,
    // Delay and class are both required for animation effect.
    removalDelay: 300,
    mainClass: 'modal--fade'
});

<!-- Normal button start -->
<a href="../nojs.html" id="example-modal1" class="button modal-trigger" role="button">Click me!</a>
<!-- Normal button end -->