View source

Modal Component

The modal component helps you create a minimal, cross browser and flexible modal window.

Installation

npm install --save-dev iotacss-components-modal

Dependencies

  • Settings.Core
  • Tools.Core

Settings

Name Type Default Description
$iota-components-modal-namespace String modal modal class name
$iota-components-modal-dialog-name String dialog dialog class name
$iota-components-modal-open-name String is-modal-open open class name
$iota-components-modal-active-name String is-active active class name
$iota-components-modal-padding String $iota-global-gutter-default Modal dialog padding
$iota-components-modal-background String rgba(0, 0, 0, 0.5) Modal background ( background shadow )
$iota-components-modal-dialog-background String rgb(255, 255, 255) Modal dialog background

How to use it

Modal component provides the basic stuff you need to create a modal window. It has an ‘is-active’ class in order to apply to the modal div to make it visible. Also, it provides an ‘is-modal-open’ class you need to apply to the body tag in order to avoid scrolling on the page while modal is open.

Hidden Modal

1
2
3
4
5
6
7
8
9
<div class="c-modal">

  <div class="c-modal__dialog">

    I am a closed modal

  </div>

</div>

Opened Modal

1
2
3
4
5
6
7
8
9
10
11
12
13
<body class="is-modal-open">

  <div class="c-modal is-active">

    <div class="c-modal__dialog">

      I am an opened modal

    </div>

  </div>

</body>