Modals

Download

You can fetch Trowel Modals with npm, yarn or bower.

# With bower
$ bower install --save trowel-modals

# With npm
$ npm install --save trowel-modals

# With yarn
$ yarn add trowel-modals

You can also download a zip archive right here.

Installation

Scss

The main scss file to include to your main .scss file is located at the ./src/scss/modals.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Modals
@import './path/to/dependencies/trowel-modals/src/scss/modals';

JavaScript

You have several javascript files for different use cases :

• The browser ready file is available at ./dest/javascript/modals.js (a minified version exists at dest/javascript/modals.min.js)
• The script written in es2015 and ready to import is available at ./src/javascript/modals.js

Usage

<button data-modal="open" data-target="#modal-example">click me !</button>

<div class="modal modal--lg" id="modal-example" data-flag="modal">
  <div class="modal__dialog">
    <div class="modal__content">
      <div class="modal__header">
        Modal title
        <button class="modal__close" data-modal="hide">x</button>
      </div>

      <div class="modal__body">
        Woohoo, you're reading this text in a modal!
      </div>

      <div class="modal__footer">
        <button type="button" data-modal="hide">Close</button>
      </div>
    </div>
  </div>
</div>

Javascript setup

In order to make it work you need to setup some javascript. You have two ways to make it work :

Javascript usage into html

<script src="./path/to/trowel-collapses/javascript/collapses.js"></script>

<script type="text/javascript">
  var modals = new TrowelModals(document.querySelectorAll('[data-flag="modal"]'));
</script>

Javascript usage with an import

import TrowelModals from './path/to/trowel-modals/src/javascript/modals';

const modals = new TrowelModals(document.querySelectorAll('[data-flag="modal"]'));

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

Component variables