Dialog componentAvailable since EcoComposer 2.1

Dialog examples
Default SCSS values
SCSS implementation
HTML implementation

The defaults values are :

'modal--btn-close--right': 1rem * theming.$font-size,
'modal--btn-close--top': 1rem * theming.$font-size,
'modal--btn-close--color': 'modal--btn-close--color',
'modal--btn-close--font-size': 1rem * theming.$font-size,
'modal--container--element--border-radius' : 1rem * theming.$font-size,
'modal--container--element--box-shadow' : 'modal--container--element--box-shadow',
'modal--container--element--background-color' : 'modal--container--element--background-color',
'modal--container--element--label--color' : 'modal--container--element--label--color',
'modal--container--element--padding' : 2rem * theming.$font-size,
'print' : false,
'suffix' : '',
'themes' : (
  'light' : (
    'default--modal--btn-close--color' : #fff,
    'default--modal--container--element--background-color' : #eee,
    'default--modal--container--element--box-shadow' : 0 0 3px #000,
    'default--modal--container--element--label--color' : #333
  ),
  'dark' : (
    'default--modal--btn-close--color' : #fff,
    'default--modal--container--element--background-color' : #444,
    'default--modal--container--element--box-shadow' : 0 0 3px #000,
    'default--modal--container--element--label--color' : #ccc
  )
)

We can implement it that way :

@include dialog.create();
@include dialog.create(
  (
    'suffix' : '-2',
    'modal--container--element--border-radius' : 5px
  )
);

We can implement it that way :

<section id=dialog--example>
  <a href=#modal class="ripple modal--btn--open" role=button>Contact us!</a>
  <div id=modal class=modal--container>
    <div class=modal--container--element>
      <a href=# role=button class="ripple-2 modal--btn--close" aria-label=Close>X</a>
      <h1>Contact</h1>

      <div class=dialog--group>
        <label for=dialog--subject>Subject</label>
        <input id=dialog--subject name=dialog--subject/>
      </div>

      <label for=dialog--message>Message</label>
      <textarea id=dialog--message name=dialog--message></textarea>
      <a href=# class="ripple modal--btn--send margin-t10b20" role=button>Send</a>
    </div>
  </div>
</section>