@wide/modulus-modal

Modulus Modal

Enhanced modal component, to be used with @wide/modulus.

Install

npm install @wide/modulus-modal --save

Usage

Register this component using Modulus:

import modulus from '@wide/modulus'
import Modal from '@wide/modulus-modal'

modulus.component('modal', Modal)

Import base scss styles:

@use '@wide/modulus-modal';

And use the provided twig template:

{% embed '@wide::modulus-modal' with { id: 'modalOne' } %}
  {% block content %}
    HEY!
  {% endblock %}
{% embed %}

Or build your own html:

<div class="modal" role="dialog" id="modalOne">
  <div class="modal_body">
    <button class="modal_close" data-modal.close></button>
    <div class="modal_content" data-modal.content>
      HEY!
    </div>
  </div>
  <div class="modal_backdrop" data-modal.close></div>
</div>

Open modal

To open the modal from a button:

<button data-modal="modalOne">Open Modal One</button>

To open the modal programmatically:

import { seek } from '@wide/modulus'

seek('modalOne').open()

Default focused element

To choose which element will be focused when opening, add data-focus attribute:

<button class="btn-primary" data-focus>Confirm</button>

By default, if there is no data-focus attribute defined, the first element of type above will be focused.

• button (excluding close button)
• a (with [href] attribute)
• input
• select
• textarea
• Element with [tabindex] attribute (with value different of [tabindex="-1"])
• Close button

Libraries

This package uses :

• hotkeys-js

Authors

• Aymeric Assier - github.com/myeti
• Julien Martins Da Costa - github.com/jdacosta

License

This project is licensed under the MIT License - see the licence file for details