Dialog componentAvailable since EcoComposer 2.1

Contact us!

The default 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>
^