Modal

Modal

When to use this component

Use the modal component to show longer content or more complex functionality that would otherwise be included on a web page but:

  • Needs more screen space to be readable and/or usable
  • Is typically advanced or only necessary for a minority of users (progressive disclosure principle)

The modal component can also be used instead of a link that opens in a new window to show content or functionality that is necessary to users but cannot interrupt them in an ongoing process:

  • The user is filling out a form or a checkout process and needs to review, say, terms of service
  • The user is watching video or listening to audio

When not to use this component

Do not use an modal component to hide a simple piece or section of content or a simple functionality that is essential to all users.

How it works

The modal component shows a modal box that is over the web page content with a color overlay in between the modal box and the web page content. When opened, the focus is moved to the modal box and the components on the web page behind the color overlay are not accessible anymore. Clicking anywhere on the color overlay outside the modal box or the close button of the modal box closes the modal box.

The modal box consists of three parts:

  • Modal header with close-button at the right (required)
  • Modal content (required)
  • Modal actions panel (optional, typically used for “Confirm” and/or “Cancel” buttons)

There are two types of modals:

  • Default modal
  • Fixed-height modal

Default modal

The default modal has a modal box whose height automatically adapts to the length of the content or functionality that is shown inside the modal box. When the modal box becomes too high to be shown in the viewport, scrolling is enabled. In this case, the full modal box including the header, content and actions panel (if enabled) moves.

Fixed-height modal

The fixed-height modal has a modal box whose height is fixed to a height relative to the height of the viewport. The position of the modal box is fixed. The modal box is always centered in the viewport.

When the content or functionality inside the modal box is too long to be shown all in the available height, scrolling of the content or functionality inside the modal box is enabled. In this case, only the modal content scrolls, the modal header and the model actions panel stay are pinned to the modal box and stay in place.

Usage within the style guide

The modal component is used in the checkboxes with filter component.

<div
    id="{{ id }}"
    class="modal{{ modifier ? ' modal--' ~ modifier }}{{ classes ? ' ' ~ classes }}"
    role="dialog"
    aria-modal="true"
  {% if title %}
    aria-labelledby="{{ id }}-title"
  {% endif %}
    tabindex="-1">

  <div class="modal-inner">
    <div class="modal-header">
      <button type="button" class="button close icon-cross modal-close{{ cancelClasses ? ' ' ~ cancelClasses }}" data-target="{{ id }}">
        <span>Close</span>
      </button>
    </div>
    <div class="modal-content">
      {% if title %}
      <{{ title_heading_level|default('h3') }} id="{{ id }}-title">{{ title }}</{{ title_heading_level|default('h3') }}>
      {% endif %}
      {{ content }}
    </div>
    {% if actions %}
      <div class="modal-actions">
        {{ actions }}
      </div>
    {% endif %}
  </div>

  <div class="modal-overlay modal-close{{ cancelClasses ? ' ' ~ cancelClasses }}" data-target="{{ id }}" tabindex="-1"></div>
</div>
<!-- Default -->
<div id="modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" tabindex="-1">

    <div class="modal-inner">
        <div class="modal-header">
            <button type="button" class="button close icon-cross modal-close" data-target="modal">
                <span>Close</span>
            </button>
        </div>
        <div class="modal-content">
            <h3 id="modal-title">An example modal</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec. Cras aliquam interdum felis, nec efficitur quam varius sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec gravida tellus, quis pulvinar enim. Proin ut lectus dui. Pellentesque maximus orci quis aliquet bibendum. Fusce vestibulum velit a tellus fermentum, in laoreet est pharetra.</p>
            <p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p>
            <p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p>
            <p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p>
            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p>
            <p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p>
            <p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p>
            <p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p>
            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p>
        </div>
    </div>

    <div class="modal-overlay modal-close" data-target="modal" tabindex="-1"></div>
</div>

<!-- With Actions -->
<div id="modal-actions" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-actions-title" tabindex="-1">

    <div class="modal-inner">
        <div class="modal-header">
            <button type="button" class="button close icon-cross modal-close" data-target="modal-actions">
                <span>Close</span>
            </button>
        </div>
        <div class="modal-content">
            <h3 id="modal-actions-title">An example modal</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec. Cras aliquam interdum felis, nec efficitur quam varius sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec gravida tellus, quis pulvinar enim. Proin ut lectus dui. Pellentesque maximus orci quis aliquet bibendum. Fusce vestibulum velit a tellus fermentum, in laoreet est pharetra.</p>
            <p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p>
            <p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p>
            <p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p>
            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p>
            <p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p>
            <p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p>
            <p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p>
            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p>
        </div>
        <div class="modal-actions">
            <button type="button" class="button button-primary modal-close" data-target="modal-actions">Understood!</button>
        </div>
    </div>

    <div class="modal-overlay modal-close" data-target="modal-actions" tabindex="-1"></div>
</div>

<!-- Fixed Height -->
<div id="modal-fixed" class="modal modal--fixed-height" role="dialog" aria-modal="true" aria-labelledby="modal-fixed-title" tabindex="-1">

    <div class="modal-inner">
        <div class="modal-header">
            <button type="button" class="button close icon-cross modal-close" data-target="modal-fixed">
                <span>Close</span>
            </button>
        </div>
        <div class="modal-content">
            <h3 id="modal-fixed-title">An example modal</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec. Cras aliquam interdum felis, nec efficitur quam varius sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec gravida tellus, quis pulvinar enim. Proin ut lectus dui. Pellentesque maximus orci quis aliquet bibendum. Fusce vestibulum velit a tellus fermentum, in laoreet est pharetra.</p>
            <p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p>
            <p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p>
            <p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p>
            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p>
            <p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p>
            <p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p>
            <p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p>
            <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p>
        </div>
        <div class="modal-actions">
            <button type="button" class="button button-primary modal-close" data-target="modal-fixed">Understood!</button>
        </div>
    </div>

    <div class="modal-overlay modal-close" data-target="modal-fixed" tabindex="-1"></div>
</div>

/* Default */
{
  "id": "modal",
  "title": "An example modal",
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec. Cras aliquam interdum felis, nec efficitur quam varius sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec gravida tellus, quis pulvinar enim. Proin ut lectus dui. Pellentesque maximus orci quis aliquet bibendum. Fusce vestibulum velit a tellus fermentum, in laoreet est pharetra.</p><p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p><p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p><p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p><p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p><p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p><p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p><p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p><p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p>"
}

/* With Actions */
{
  "id": "modal-actions",
  "title": "An example modal",
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec. Cras aliquam interdum felis, nec efficitur quam varius sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec gravida tellus, quis pulvinar enim. Proin ut lectus dui. Pellentesque maximus orci quis aliquet bibendum. Fusce vestibulum velit a tellus fermentum, in laoreet est pharetra.</p><p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p><p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p><p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p><p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p><p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p><p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p><p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p><p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p>",
  "actions": "<button type=\"button\" class=\"button button-primary modal-close\" data-target=\"modal-actions\">Understood!</button>"
}

/* Fixed Height */
{
  "id": "modal-fixed",
  "title": "An example modal",
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec. Cras aliquam interdum felis, nec efficitur quam varius sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec gravida tellus, quis pulvinar enim. Proin ut lectus dui. Pellentesque maximus orci quis aliquet bibendum. Fusce vestibulum velit a tellus fermentum, in laoreet est pharetra.</p><p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p><p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p><p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p><p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p><p>Fusce sed lacus turpis. Praesent ultrices viverra neque vel fermentum. Donec pulvinar ligula et iaculis euismod. Donec rhoncus cursus lacus, et pharetra ligula tristique non. Morbi nec ligula ornare, semper orci sit amet, varius massa. Fusce magna quam, condimentum et rhoncus et, porttitor at turpis. Donec id nunc dapibus, consequat massa a, cursus odio. Aliquam in dignissim sem. Suspendisse potenti. Etiam at metus vitae urna viverra luctus. Donec convallis interdum convallis. Donec volutpat eget velit in varius. Nam porta varius urna at eleifend. In elit ex, vestibulum non ex a, suscipit semper dui. Integer dictum lacus augue, vitae rhoncus lorem tempor eget.</p><p>Integer nec suscipit dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non finibus felis. Nunc faucibus sapien at fermentum semper. Donec congue egestas felis, eget ultrices augue commodo in. Aliquam vitae elit diam. Nulla auctor velit sed nisl lacinia, sit amet tincidunt lectus consectetur. Aliquam sit amet hendrerit lacus. Curabitur lacus enim, tempus eget massa id, varius elementum quam. Praesent pulvinar facilisis lacinia. Quisque congue imperdiet nunc vitae dictum. Nulla a nisi neque. Mauris sed mollis orci. Pellentesque sagittis tempus diam. Phasellus malesuada diam sed lectus fringilla pellentesque. Nullam sit amet bibendum magna, et hendrerit tellus.</p><p>In ultrices, libero in pretium elementum, arcu est eleifend leo, et luctus ante orci nec mi. Sed ac facilisis sapien, sit amet dignissim erat. Nulla malesuada quam vitae leo iaculis fermentum. Aliquam condimentum odio at metus malesuada, et gravida nisi ornare. Sed lobortis eros eu dolor pulvinar porta. Sed luctus auctor pulvinar. Etiam laoreet interdum rhoncus. Aliquam in quam posuere ligula faucibus auctor.</p><p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer condimentum mauris non urna scelerisque bibendum. Nulla facilisi. Curabitur sed mi fermentum, maximus lorem eu, laoreet purus. Vivamus ultricies consequat odio, a tristique erat varius ac. Morbi feugiat, nisl eu vehicula elementum, ipsum orci laoreet eros, id hendrerit enim sem in dolor. Maecenas augue ligula, vehicula a risus blandit, volutpat euismod felis. Aliquam maximus, tortor sed tincidunt volutpat, lorem ex dictum sem, eu scelerisque augue mi vitae orci. Nam imperdiet magna porttitor nunc finibus accumsan. Nullam maximus, nulla sit amet lobortis ullamcorper, erat nulla ornare lacus, non ullamcorper felis mi a nibh. Integer eget pulvinar quam.</p>",
  "modifier": "fixed-height",
  "actions": "<button type=\"button\" class=\"button button-primary modal-close\" data-target=\"modal-fixed\">Understood!</button>"
}

  • Content:
    // Needed for smooths scrolling on iphone / ipad inside modals.
    // Placing it on .modal is not sufficient for safari.
    * {
      -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-vendor-prefixes
    }
    
    .modal {
      @include tablet-and-below {
        background-color: color('white');
      }
    
      @include tablet {
        animation: fade .2s ease-in-out;
      }
    
      display: flex;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      max-height: 100vh;
      visibility: hidden;
      z-index: z('modal', 'base');
      overflow-y: auto;
    
      // states
      &.visible {
        visibility: visible;
    
        @include tablet {
          .modal-overlay {
            display: block;
          }
        }
      }
    
      // modifiers
      &.modal--fixed-height {
        &.visible > .modal-inner {
          max-height: 80vh;
    
          @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { // sass-lint:disable-line no-vendor-prefixes
            height: 80vh; // IE fix
          }
        }
    
        > .modal-inner {
          > .modal-content {
            flex-grow: 1;
            margin-bottom: 3.8rem;
            overflow-y: auto;
          }
    
          > .modal-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            margin-top: -3.8rem;
    
            @include tablet {
              position: static;
            }
          }
        }
      }
    
      // children
      &.visible .modal-inner {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        flex-direction: column;
        width: 100%;
        min-height: 100%;
        margin: 0 auto;
        z-index: z('modal', 'content');
        filter: drop-shadow(0 2px 8px #{color('dark-gray', -4, true)});
    
        @include tablet {
          right: 0;
          width: $bp-max-content * .8;
          max-width: calc(100% - #{$gutter-width * 2});
          height: auto;
          min-height: 0;
          margin: 10vh auto 0;
          padding-bottom: $gutter-width;
          opacity: 0;
          animation: fade .2s ease-in-out forwards;
          animation-delay: .1s;
        }
    
        > * {
          background-color: color('white');
    
          &:first-of-type {
            border-top-left-radius: border-radius('radius-2');
            border-top-right-radius: border-radius('radius-2');
            overflow: hidden;
          }
    
          &:last-of-type {
            border-bottom-left-radius: border-radius('radius-2');
            border-bottom-right-radius: border-radius('radius-2');
            overflow: hidden;
          }
        }
      }
    
      ///
      /// Header
      ///
      &-header {
        display: block;
        flex-shrink: 0;
        text-align: right;
      }
    
      &-header &-close {
        padding: 0 .4rem;
        border: 0;
        background: transparent;
        color: color('dark-gray');
        font-size: .8rem;
        font-weight: 400;
        cursor: pointer;
    
        &::before {
          order: 0;
          margin: 0 .5rem 0 0;
          font-size: 1.4rem;
        }
    
        &:hover,
        &:focus {
          @include theme('background-color', 'color-primary--lighten-4', 'modal-close-hover-bg-color');
        }
      }
    
      &-close {
        cursor: pointer;
      }
    
      ///
      /// Content
      ///
      &-content {
        padding: 0 1rem .8rem;
    
        @include tablet {
          padding: 0 $gutter-width .8rem;
        }
      }
    
      ///
      /// Actions
      ///
      &-actions {
        @include theme('border-color', 'color-primary--lighten-4', 'modal-action-border-bottom');
    
        display: flex;
        flex-shrink: 0;
        align-items: center;
        width: 100%;
        padding: .8rem 1rem;
        border-top: 2px solid;
        background-color: color('white');
        z-index: z('modal', 'actions');
    
        @include tablet {
          position: relative;
        }
      }
    
      ///
      /// Overlay
      ///
      .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .7;
        z-index: z('modal', 'overlay');
    
        &,
        &:hover,
        &:focus {
          @include theme('background-color', 'color-primary--darken-3', 'modal-overlay-background-color');
        }
      }
    }
    
    @keyframes fade {
      0% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }
    
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: components/31-molecules/modal/_modal.scss
  • Size: 3.8 KB
  • Content:
    /* global Modal */
    'use strict';
    
    (function () {
    
      if (!Modal) {
        return;
      }
    
      const selected = document.querySelectorAll('.modal:not(.has-custom-binding)');
      for (let i = selected.length; i--;) {
        new Modal(selected[i]);
      }
    
    })();
    
  • URL: /components/raw/modal/modal.bindings.js
  • Filesystem Path: components/31-molecules/modal/modal.bindings.js
  • Size: 243 Bytes
  • Content:
    'use strict';
    
    /* global define, module, bodyScrollLock */
    (function (root, factory) {
      if (typeof define === 'function' && define.amd) {
        define(factory);
      }
      else {
        if (typeof exports === 'object') {
          module.exports = factory();
        }
        else {
          root.Modal = factory();
        }
      }
    })(this || window, function () {
    
      // IE 9+ polyfill for Element.closest()
      if (!Element.prototype.matches) {
        Element.prototype.matches = Element.prototype.msMatchesSelector ||
          Element.prototype.webkitMatchesSelector;
      }
    
      if (!Element.prototype.closest) {
        Element.prototype.closest = function (s) {
          var el = this;
          if (!document.documentElement.contains(el)) {
            return null;
          }
          do {
            if (el.matches(s)) {
              return el;
            }
            el = el.parentElement || el.parentNode;
          } while (el !== null && el.nodeType === 1);
          return null;
        };
      }
    
      /**
       * Generates a tabTrap object
       *
       * @param {object} container DOM-element
       * @constructor
       */
      function TabTrap(container) {
        let focusables = getFocusables(container);
    
        /**
         * Returns all focusable elements within a given container.
         *
         * @param {object} container hamburger DOM-element
         * @return {array} focusable elements
         */
        function getFocusables(container) {
          let focusables = container.querySelectorAll(
            'a[href], ' +
            'area[href], ' +
            'input:not([disabled]):not([hidden]), ' +
            'select:not([disabled]), ' +
            'textarea:not([disabled]), ' +
            'button:not([disabled]), ' +
            '[tabindex="0"]'
          );
          return Array.prototype.slice.call(focusables);
        }
    
        this.setFocusables = function () {
          focusables = getFocusables(container);
        };
    
        this.next = function (e) {
          let active = document.activeElement;
          if (active && active === focusables[focusables.length - 1]) {
            focusables[0].focus();
            e.preventDefault();
          }
        };
    
        this.back = function (e) {
          let active = document.activeElement;
          if (active && active === focusables[0]) {
            focusables[focusables.length - 1].focus();
            e.preventDefault();
          }
        };
    
        this.home = function () {
          focusables[0].focus();
        };
    
        this.end = function () {
          focusables[focusables.length - 1].focus();
        };
    
        this.hasFocusables = focusables && focusables.length > 0;
      }
    
      return function (modal, options) {
        if (!modal || !modal.id) {
          return;
        }
    
        if (!options) {
          options = {};
        }
    
        if (typeof options.changeHash === 'undefined') {
          options.changeHash = true;
        }
    
        if (typeof bodyScrollLock === 'undefined') {
          console.warn('bodyScrollLock could not be found.'); // eslint-disable-line no-console
        }
    
        let triggers = [];
        let activeTrigger;
        let hash;
        let nextSibling;
        let parent;
        let parentModal;
    
        /**
         * A Gent styleguide class to create a tabTrap.
         * @type {TabTrap}
         */
        const tabTrap = new TabTrap(modal);
    
        /**
         * Initialise the component.
         */
        const init = () => {
          triggers = document.querySelectorAll(`[aria-controls="${modal.id}"], [href="#${modal.id}"]`);
          nextSibling = modal.nextElementSibling;
          parent = modal.parentElement;
    
          if (!options.changeHash && triggers.length === 0) {
            return;
          }
    
          modal.setAttribute('tabindex', '-1');
          modal.setAttribute('aria-hidden', 'true');
          modal.setAttribute('data-gent-modal', 'true');
    
          const _open = e => {
            activeTrigger = e.currentTarget;
    
            if (activeTrigger.hasAttribute('aria-controls')) {
              open();
            }
          };
    
          for (let i = triggers.length; i--;) {
            triggers[i].setAttribute('aria-expanded', 'false');
            triggers[i].addEventListener('click', _open);
          }
    
          /**
           * A list of elements to trigger closing the modal.
           * At least one must have the button role.
           * @type {NodeList}
           */
          const closeBtns = modal.querySelectorAll(
            options.closeBtns || '.modal-close'
          );
          for (let i = closeBtns.length; i--;) {
            if (!closeBtns[i].dataset.target || closeBtns[i].dataset.target === modal.id) {
              closeBtns[i].addEventListener('click', handleClose);
            }
          }
    
          /*
            Possibility to alter the URL fragment when the modal opens/closes.
           */
          hash = window.location.hash;
          if (options.changeHash) {
            addHashEvents();
          }
    
          /*
            Custom event triggered on resize and on init.
            For instance for when the modal is not hidden on all screen sizes.
           */
          if (options.resizeEvent) {
            options.resizeEvent(open, close);
            addResizeEvent();
          }
        };
    
        /**
         * A little helper to get siblings of an element.
         *
         * @return {array}
         *   Array with siblings.
         */
        const getSiblings = () => {
          return [].slice.call(modal.parentNode.childNodes).filter(n => n.nodeType === 1 && n !== modal);
        };
    
        /**
        * Open the modal.
        *
        * @param {Boolean} changeHash  Whether or not to change the hash in the URI
        */
        const open = (changeHash = true) => {
          if (changeHash && options.changeHash !== false) { // change the url
            history.pushState(null, null, `#${modal.id}`);
            hash = `#${modal.id}`;
          }
    
          parentModal = document.querySelector('body > [data-gent-modal]');
          if (parentModal) {
            document.body.replaceChild(modal, parentModal);
          }
          else {
            document.body.appendChild(modal);
          }
    
          modal.classList.add('visible');
          modal.setAttribute('aria-hidden', 'false');
    
          const scrollable = modal.dataset.scrollable;
          bodyScrollLock.disableBodyScroll(scrollable ? modal.querySelector(scrollable) : modal, {
            allowTouchMove: e => true
          });
    
          const siblings = getSiblings();
          siblings.forEach(n => n.setAttribute('aria-hidden', true));
    
          document.addEventListener('keydown', handleKeyboardInput);
          if (activeTrigger) {
            activeTrigger.setAttribute('aria-expanded', 'true');
          }
          modal.focus();
        };
    
        /**
         * Close the modal.
         */
        const close = () => {
          const siblings = getSiblings();
          siblings.forEach(n => n.setAttribute('aria-hidden', false));
    
          modal.classList.remove('visible');
          modal.setAttribute('aria-hidden', 'true');
    
          if (parentModal) {
            modal.parentNode.replaceChild(parentModal, modal);
            bodyScrollLock.enableBodyScroll(modal);
            const scrollable = parentModal.dataset.scrollable;
            bodyScrollLock.disableBodyScroll(scrollable ? parentModal.querySelector(scrollable) : parentModal, {
              allowTouchMove: true
            });
          }
          else {
            bodyScrollLock.clearAllBodyScrollLocks();
            document.removeEventListener('keydown', handleKeyboardInput);
          }
    
          parent.insertBefore(modal, nextSibling);
          if (activeTrigger) {
            activeTrigger.setAttribute('aria-expanded', 'false');
            activeTrigger.focus();
          }
        };
    
        /**
         * Handle keyboard input
         * @param {object} e event
         */
        const handleKeyboardInput = e => {
          if (!tabTrap || !tabTrap.hasFocusables || !e) {
            return;
          }
    
          const keyCode = e.keyCode || e.which;
    
          switch (keyCode) {
            case 9: // tab
              if (e.shiftKey) {
                tabTrap.back(e);
              }
              else {
                tabTrap.next(e);
              }
              break;
            case 27: // esc
              e.preventDefault();
              handleClose();
              break;
          }
        };
    
        /**
         * Decision point on how the modal should be closed.
         * When the URL changes, the `popstate` event should be triggered manually,
         * otherwise we'll close the modal directly.
         */
        const handleClose = () => {
          if (options.changeHash) {
            history.back();
    
            return;
          }
    
          close();
        };
    
        /**
         * Add a user defined throttled resizeEvent.
         */
        const addResizeEvent = () => {
          let resizeTimer;
    
          window.addEventListener('resize', () => {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => options.resizeEvent(open, close), 250);
          });
        };
    
        /**
         * Add events that handle hash changes
         */
        const addHashEvents = () => {
          window.addEventListener('hashchange', () => {
            if (hash === `#${modal.id}`) {
              close();
            }
    
            hash = window.location.hash;
            if (hash === `#${modal.id}`) {
              open(false);
            }
          });
    
          if (hash === `#${modal.id}`) { // show modal on page load when the hash corresponds
            history.replaceState(null, null, window.location.href.split('#')[0]);
            open();
          }
        };
    
        init();
    
        return {close: handleClose, open: open};
      };
    });
    
  • URL: /components/raw/modal/modal.functions.js
  • Filesystem Path: components/31-molecules/modal/modal.functions.js
  • Size: 8.9 KB