colby-modals

Modals

A simple ES6 class for handling basic Modals.

Usage

In the HTML:

<div class="modal__container">
        <a class="modal__activator" href=#>Button Text</a>
        <div class="modal__content">
            <button aria-label="close" class=modal__close>&#10006;</button>
            Modal Title Info
            Modal Content
            <button aria-label="Previous Modal" class=modal__left>&#171;</button><button aria-label="Next Modal" class=modal__right>&#187;</button>
        </div>
        <div class=modal__background></div>
    </div>

Recommended WordPress shortcode

[colby_modal btitle="Button Title" modaltitle="Modal title display above content"]Modal Content[/colby_modal]

add_shortcode( 'colby_modal', function( $atts, $content = null ) {

    return '<div class="modal__container">
        <a class="modal__activator" href=#>'.$atts['btitle'].'</a>
        <div class="modal__content">
            <button aria-label="close" class=modal__close>&#10006;</button>
            <h3>'.$atts['modaltitle'].'</h3>
            <p>'.$content.'</p>
            <button aria-label="Previous Modal" class=modal__left>&#171;</button><button aria-label="Next Modal" class=modal__right>&#187;</button>
        </div>
        <div class=modal__background></div>
    </div>';
  } );