Dialog
When to use a dialog?
You should use a dialog, when you need the user to focus on one information, action or task. Dialogs interrupt the user’s task flow, so make sure it’s important enough.
Good examples on when to use a dialog: alerts, confirmations, a single setting with just a few fields.
Bad examples on when to use a dialog: whole workflow steps, tasks that the user can resume doing later.
Default
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-default">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-default">
<p>
Dolore dolore, aliquip consequat voluptate, in dolor, excepteur ut. Nisi, in proident culpa ut non, reprehenderit voluptate, nulla, tempor? In cillum, excepteur esse, magna officia commodo. Veniam aliquip sint aliquip labore, commodo, nulla magna dolore. Velit esse ut dolore est elit pariatur dolore culpa, ipsum. Mollit officia ullamco incididunt mollit cillum dolore? Dolore id tempor, quis, excepteur. Consequat ut aliquip veniam, elit dolore eu sit. Labore nisi incididunt, esse aliqua culpa.
</p>
<p>
Do nisi magna non, proident labore commodo nisi eiusmod sed, et? Sunt ut magna nostrud mollit eu sint aliqua commodo laborum. Eu, esse reprehenderit ex aliquip duis laborum consequat cupidatat quis. Et ut amet quis ea velit magna in labore, cupidatat. Reprehenderit irure mollit ut nisi, tempor sint, laborum amet?
</p>
</e-dialog>
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-default">Open Dialog</e-dialoghandler><e-dialog id="dialog-default"><p>Sit reprehenderit, do pariatur sed esse occaecat reprehenderit. Non occaecat velit velit qui excepteur amet. Consectetur dolor excepteur. Ea in est ut duis dolor pariatur do dolore, ullamco, ut. Cupidatat aliqua tempor, incididunt ut, occaecat, pariatur, non, aliqua. Cupidatat culpa reprehenderit qui? </p><p>Commodo et amet, aute occaecat tempor, labore cillum et est ea? Excepteur elit minim ut culpa consequat labore, fugiat duis adipiscing, laborum ad pariatur, do. Quis, consectetur in, quis, aute laborum do. </p></e-dialog>Dolor nulla ex consectetur reprehenderit deserunt enim laborum ullamco tempor nulla, tempor sit. Et aute aliqua in fugiat, laboris ea irure exercitation eu ex ullamco? Do ex officia exercitation, sint dolore non fugiat quis anim, ad. Veniam nostrud, lorem. Aliqua dolor, eu, sit magna elit, lorem aliquip magna. Voluptate elit cillum quis, culpa amet adipiscing laborum in, non esse, tempor, consectetur sunt.
Ullamco ea adipiscing dolore incididunt enim tempor aute anim eu, fugiat id, ipsum occaecat? In consectetur non aliquip proident, est do, ex aliqua consequat. Eiusmod, laborum in enim in, labore, laboris aliqua excepteur sint? Tempor minim sed aute ex, ut, occaecat, excepteur, cupidatat nostrud sunt magna.
Component Variation
is
<button class="e-btn e-btn-primary" is="e-dialoghandler-button" dialog="#dialog-is">
Open Dialog
</button>
<e-dialog id="dialog-is" headline="Lorem Title">
<p>
Ullamco ut elit, enim aliqua nostrud, aliquip. Ullamco anim minim tempor adipiscing occaecat dolore dolor. Consectetur sunt, aliqua est reprehenderit nulla proident qui. Et eu culpa enim, voluptate, laborum reprehenderit commodo dolor sint, sunt irure anim? Ipsum dolor ut, sed, labore duis labore sed voluptate, in ut.
</p>
<p>
Ad excepteur velit sunt adipiscing in aliqua, minim labore. Ut, in, ullamco tempor in ipsum fugiat in magna. Ipsum ut elit, cillum, voluptate veniam elit eu ullamco pariatur. In, officia ipsum officia velit consequat cupidatat enim deserunt tempor voluptate eiusmod, mollit.
</p>
</e-dialog>
<button class="e-btn e-btn-primary" is="e-dialoghandler-button" dialog="#dialog-is">Open Dialog</button><e-dialog id="dialog-is" headline="Lorem Title"><p>Excepteur ut dolore dolor, fugiat, in ipsum. Ea mollit dolor irure deserunt, dolor elit commodo laborum, in labore. Lorem nulla anim, lorem proident proident labore, deserunt minim consequat est proident sunt reprehenderit. Lorem do est lorem ut sit ullamco lorem elit officia do? Ex, eiusmod, reprehenderit ipsum, consequat, tempor, ea fugiat, cillum do, ullamco nostrud ut officia. </p><p>Nulla reprehenderit voluptate officia minim tempor in. Minim, duis officia fugiat est culpa proident voluptate officia nisi. Ullamco consequat tempor magna cupidatat veniam cillum dolore id consectetur, sit amet sed cillum eu. Occaecat officia nostrud, excepteur ut anim incididunt ex sed voluptate eiusmod? </p></e-dialog>Anim, eiusmod, sed, in dolor elit aliqua mollit. Occaecat ullamco aliqua labore sint magna laboris ut? Veniam fugiat in fugiat consectetur ex nulla. Enim cillum duis irure eiusmod, est excepteur dolor enim laborum et est. Proident ad duis quis aliqua non do culpa.
Ex dolor magna aliquip, dolor proident ex eiusmod in irure culpa, dolor qui. Irure, duis duis, enim ullamco, tempor ipsum consequat consequat aliquip aute? Nulla do velit dolore, cupidatat, aliquip aliquip duis quis aliquip occaecat? Mollit pariatur aute sunt consectetur ad. Ad, officia, cillum consequat in eu est, tempor aliqua minim dolore. Laboris elit, adipiscing consequat irure, labore ut aliquip in, ut in.
Title
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-title">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-title" headline="Lorem Title">
<p>
Aliquip aliqua, ut magna do, ea, exercitation. Enim, adipiscing minim ut ut anim, cillum, cillum deserunt reprehenderit, in. Non, ex, exercitation amet qui consequat ad et. Commodo nostrud voluptate officia. Ut, velit tempor, irure, cillum. Aliquip dolor, cillum aliqua mollit, dolore incididunt aliqua.
</p>
<p>
Qui sit, dolor, excepteur, laboris dolor adipiscing aliqua magna dolor. Aliqua, ad quis excepteur cupidatat in, sint. Ut reprehenderit lorem reprehenderit occaecat enim ad velit, aliquip. Esse, ut ut adipiscing.
</p>
</e-dialog>
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-title">Open Dialog</e-dialoghandler><e-dialog id="dialog-title" headline="Lorem Title"><p>Mollit elit et aliquip commodo irure magna dolor, excepteur. Dolore lorem irure cupidatat nostrud enim labore, tempor, sunt et. Proident proident esse ex est tempor, veniam et dolor id dolor consequat laborum labore dolore enim. Et tempor, nostrud consectetur ullamco magna irure dolore reprehenderit irure veniam? Consequat ex velit dolor. </p><p>Voluptate incididunt aliquip, aliqua, anim eu dolore qui dolore. Dolor ex ipsum, ut nostrud officia. Dolor in laborum, aute aute dolor nostrud nisi, enim tempor proident. Ullamco sed, elit in laboris, minim, irure pariatur, voluptate sed, eu laboris. Ex veniam magna, deserunt dolor. Anim anim culpa pariatur esse cupidatat amet eu mollit. Qui ad culpa ipsum fugiat voluptate velit esse officia occaecat voluptate sint culpa excepteur, elit in. Ullamco cupidatat quis amet dolor dolore tempor tempor lorem. </p></e-dialog>Sit amet, consectetur occaecat veniam consectetur non fugiat. Ut excepteur occaecat labore aliqua, aliquip enim fugiat est. Ad nulla anim irure, cillum nulla ad, laborum, in dolor. Ipsum officia, adipiscing sunt commodo, officia.
Veniam veniam duis reprehenderit incididunt nisi, ipsum eiusmod, laborum non amet ex pariatur aute? Quis aliqua aliqua non qui sed id lorem. Adipiscing aliqua dolor eu proident velit, lorem velit, incididunt aliqua. Voluptate aute cupidatat, et, duis, commodo duis adipiscing, pariatur tempor in? Exercitation, officia labore deserunt occaecat est dolor in pariatur, minim proident.
Open from script
<button class="e-btn" onclick="document.querySelector('#dialog-js').open();">
Open with JS
</button>
<e-dialog id="dialog-js" headline="Lorem Title">
<p>
Nostrud labore aute magna, dolore quis magna, sed. Culpa ut laboris voluptate dolor nisi. Laborum dolore, labore deserunt anim et aute do sint labore sint. Veniam, ut sunt aliqua ut tempor exercitation irure quis, aliqua. Sint est qui, ut eu ad consectetur fugiat ullamco. Anim officia, excepteur in incididunt, ea, ipsum ut voluptate, magna?
</p>
<p>
In deserunt, tempor mollit id non quis excepteur deserunt aute irure sit? Eu nulla occaecat, ullamco in deserunt tempor. Ea elit est ex deserunt eiusmod, ullamco qui duis reprehenderit fugiat eiusmod laboris est. Magna eiusmod tempor sit velit proident ipsum, et amet sint. Reprehenderit nulla nostrud, deserunt cillum in minim. Nulla dolore, dolor voluptate laboris adipiscing exercitation cupidatat? Esse qui incididunt voluptate duis sint, sunt eu?
</p>
</e-dialog>
<button class="e-btn" onclick="document.querySelector('#dialog-js').open();">Open with JS</button><e-dialog id="dialog-js" headline="Lorem Title"><p>Velit, in, mollit mollit excepteur in, nostrud excepteur non? Dolore culpa irure non voluptate, sit duis et, id anim aliquip? Dolore, est ullamco commodo elit nisi aliquip, in exercitation id velit? Cupidatat ad, et minim commodo qui exercitation nisi, id sunt. Adipiscing ipsum ex aliqua irure, lorem excepteur nisi deserunt sint nostrud aliquip. </p><p>Dolor dolore eiusmod, dolore enim sed. Pariatur amet sed cupidatat aute ea ea. Consectetur et consequat fugiat aliqua, laborum, est labore in, amet dolore nostrud excepteur. Sed enim excepteur ullamco aute ut non commodo ut, sed, quis ipsum culpa. Sint magna dolor officia, excepteur do esse aliquip duis eiusmod, officia veniam lorem exercitation. Cillum commodo occaecat ex do ad cillum, magna irure eiusmod ullamco, incididunt. Ut consequat veniam in in eiusmod aliqua labore occaecat eu fugiat minim, do et? </p></e-dialog>Consectetur sit in proident ex dolore ut ullamco, ullamco ut duis? Aute, dolor ea laboris do quis nisi sunt. Minim nisi, eiusmod aliqua consectetur. Ad ad dolor ut do nostrud ut sed magna, deserunt quis, laboris.
Laborum commodo, velit, enim pariatur exercitation proident reprehenderit, mollit incididunt exercitation, id, minim. Irure, et cillum officia pariatur sint, est, exercitation, in, aliqua dolor aliquip? Quis minim ut consectetur officia, in ut ea, in, ut, pariatur. Ea, dolor reprehenderit sunt labore dolore magna dolor pariatur laborum. Adipiscing, ullamco, do ipsum, eu, labore. In ullamco magna, consectetur, aliqua duis reprehenderit ut, ex, laboris, dolore qui?
No keyboard actions
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-nokeys">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-nokeys" headline="Lorem Title" no-keys="true">
<p>
Ullamco consectetur dolore non dolore sit incididunt deserunt. Occaecat quis irure pariatur, nostrud anim consectetur ad? Velit voluptate dolore voluptate, amet dolor eu minim consectetur, reprehenderit, eiusmod lorem? Eu, cillum est reprehenderit enim, laboris veniam officia elit adipiscing ut eu. Dolor commodo magna sunt dolore, minim, sint in eu, sint reprehenderit occaecat aliquip ut. Laboris consequat consectetur aliquip sed mollit ullamco enim, consectetur aliquip consectetur.
</p>
<p>
Id ullamco lorem, ad ut tempor, nulla velit elit lorem esse cupidatat. Sed fugiat voluptate aliquip, aute irure ut, id incididunt officia nostrud eiusmod qui, ea, lorem. Amet commodo sit in aute, fugiat. Do in ea ullamco, amet nulla incididunt et. Proident sunt deserunt velit enim, ut nostrud reprehenderit occaecat fugiat aliqua sit esse sint ullamco cillum? Incididunt reprehenderit, ipsum, sint nisi, ut, commodo irure. Mollit elit ad id ad, laborum quis sit, dolore magna. Excepteur esse aliqua nisi cillum.
</p>
</e-dialog>
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-nokeys">Open Dialog</e-dialoghandler><e-dialog id="dialog-nokeys" headline="Lorem Title" no-keys="true"><p>Deserunt consequat reprehenderit, amet, duis lorem sint lorem dolore? Sed incididunt, ut dolore reprehenderit, occaecat minim in amet esse? Laboris pariatur, nulla nostrud, eu quis aute laboris. Sunt nostrud esse consequat sint ad non officia dolor. </p><p>Amet, do, magna. Labore adipiscing esse velit excepteur, in excepteur nisi, aliqua dolore quis. Eu incididunt, ea in do velit. Officia, nisi, mollit laboris sint, excepteur, ullamco lorem ullamco, anim sint esse occaecat. </p></e-dialog>Duis duis, eiusmod eiusmod ut enim in, eu? Consectetur et excepteur dolore aliqua ut sint nisi ad. Eiusmod officia cillum, sit ut ipsum commodo. Laboris officia eu proident sunt minim occaecat culpa dolor, sint.
Et, non in tempor commodo esse ut in sint. Nulla cillum mollit eu dolor. Minim, ut commodo, in, commodo. In adipiscing qui minim do ut mollit, culpa, eu dolore.
No direct close
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-noclose">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-noclose" headline="Lorem Title" no-close="true">
<p>
Reprehenderit culpa voluptate ipsum tempor est occaecat qui. Et, sunt sit aute qui magna in, ut? Lorem enim nulla fugiat sunt dolore mollit. Sit sunt irure esse labore, esse, incididunt sed. Dolor, ipsum in commodo ut.
</p>
<p>
Aliqua ut in velit excepteur veniam consectetur in sunt deserunt non. Ex nostrud in ut dolor duis, est ut, quis cupidatat excepteur, aliqua. Dolor non excepteur, minim velit laboris ea incididunt cupidatat in tempor reprehenderit anim ea. Ut ad laboris enim occaecat dolore, duis cillum, veniam pariatur nisi.
</p>
<a href="javascript:void(0)" data-action="close">
Close This
</a>
</e-dialog>
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-noclose">Open Dialog</e-dialoghandler><e-dialog id="dialog-noclose" headline="Lorem Title" no-close="true"><p>Officia ea fugiat, sint culpa ut. Ipsum in sint non in ad. Amet in laborum, aliquip irure, in elit. Incididunt veniam, excepteur exercitation enim. </p><p>Irure, cillum reprehenderit sed labore eu, laborum quis ut culpa, anim et. Est deserunt labore in tempor, aliqua sint, ad commodo mollit quis, in, esse deserunt exercitation enim? In lorem deserunt qui fugiat labore quis. Magna deserunt, nulla qui consequat, aliquip et? In sed minim voluptate ut voluptate, dolore commodo magna? Sint eiusmod dolor fugiat, ut. </p><a href="javascript:void(0)" data-action="close">Close This</a></e-dialog>Ea nostrud excepteur, est exercitation aliquip deserunt excepteur est nisi anim velit. Cillum, dolor deserunt consectetur sunt anim adipiscing, mollit.
Nulla excepteur reprehenderit, reprehenderit tempor aliquip cupidatat sunt minim duis anim, officia incididunt non aute? Ut et, nulla, do minim, excepteur id laboris in mollit eiusmod. Esse, consequat, est consequat dolore aliqua ea fugiat non adipiscing. Mollit nisi, cupidatat eu? Adipiscing in ex eiusmod in mollit ullamco, eu excepteur cupidatat veniam, nisi. Duis, ex veniam, dolor tempor nulla fugiat laborum quis. Non, ut commodo consequat veniam in?
Close ThisFooter
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-footer">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-footer" headline="Lorem Title">
<p>
Ut ipsum sed, deserunt aliquip sit ut aute eu, ut eu sed. Quis elit, excepteur enim ex est. Ex voluptate id dolore eiusmod ut nulla, do. Dolor fugiat, fugiat in ea minim excepteur, laboris ipsum. Pariatur ex cillum labore laboris ut reprehenderit anim. Dolor velit tempor, dolore cillum ex fugiat in officia exercitation?
</p>
<p>
Excepteur adipiscing adipiscing. Dolore adipiscing velit velit exercitation dolor in nisi cupidatat. Officia dolor cupidatat sed ut dolor deserunt, esse duis labore anim irure irure. Ex dolore, commodo duis adipiscing adipiscing ut dolor proident cillum? Ullamco culpa magna duis exercitation esse incididunt ut, proident, enim dolore do sit.
</p>
<div class="e-dialog__footer">
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-small">
<button class="e-btn close_btn">
Close with Script
</button>
</div>
<div class="e-cell e-cell-small">
<button class="e-btn" data-action="close">
Close with Attr
</button>
</div>
</div>
</div>
</e-dialog>
<script>
document.querySelector('.close_btn').addEventListener('click', function() {document.querySelector('#dialog-footer').close();});
</script>
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-footer">Open Dialog</e-dialoghandler><e-dialog id="dialog-footer" headline="Lorem Title"><p>Duis magna do, officia tempor consequat, esse occaecat ullamco, ut, in magna do aute? Minim cupidatat, sunt exercitation, anim id ut laboris eu consequat mollit, labore. Irure in adipiscing enim, labore, est exercitation tempor nostrud cillum minim, velit, aliqua. Ut minim elit, dolor sunt aliquip veniam ea sit, nisi? Do proident occaecat in duis, in laborum dolore est anim, cupidatat consequat reprehenderit do. Exercitation, sint consectetur, occaecat, do ut sit mollit. Velit incididunt lorem ut, consectetur proident mollit sit. Id amet et duis enim, sint ad dolor sint sint ut ea quis. Tempor ea ad in, laborum culpa? </p><p>Nostrud incididunt eiusmod, aute ea, magna, voluptate exercitation sunt esse? Dolore nisi voluptate deserunt dolor nulla sunt ea incididunt amet? Sed ad officia adipiscing tempor in dolor do magna irure. Voluptate reprehenderit, quis officia amet incididunt id ullamco fugiat ut. </p><div class="e-dialog__footer"><div class="e-grid e-grid-small"><div class="e-cell e-cell-small"><button class="e-btn close_btn">Close with Script</button></div><div class="e-cell e-cell-small"><button class="e-btn" data-action="close">Close with Attr</button></div></div></div></e-dialog><script>document.querySelector('.close_btn').addEventListener('click', function() {
document.querySelector('#dialog-footer').close();
});
</script>Consectetur amet fugiat ullamco ex aute anim tempor velit. Lorem consectetur cillum commodo, qui, occaecat ut. Est minim duis, dolore aute lorem non consequat minim cillum, sed magna elit id duis consequat. Irure ut in est sunt, id cupidatat tempor mollit sunt est dolore sunt? Dolor veniam eiusmod dolor enim aliquip, dolore. Amet veniam excepteur dolor id dolor, officia occaecat amet laboris reprehenderit. Do commodo, dolore, et excepteur, reprehenderit minim, exercitation esse, velit.
Qui, reprehenderit sit veniam consequat dolor, pariatur officia in nostrud incididunt anim sit. Reprehenderit, tempor tempor ipsum, pariatur quis, reprehenderit deserunt, sint anim dolore aliqua. Voluptate anim id, sed labore cupidatat enim deserunt quis. Exercitation esse adipiscing incididunt dolore, et enim. Sed, do esse dolor ut qui cupidatat est est, culpa. Sed aliquip culpa commodo, culpa culpa lorem sunt. Velit consectetur, ex in, mollit elit enim, aute. Qui, dolor pariatur elit magna occaecat et, excepteur. Ex eiusmod, fugiat reprehenderit, eiusmod, aute est culpa?
Custom Header
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-header">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-header" headline="Custom Header Title">
<e-dialog-header>
<div class="e-tabs e-tabs-dialogheader">
<div class="e-tabs__title e-tabs__title-active">
<div class="e-tabs__separator">
First tab
</div>
</div>
<div class="e-tabs__title">
<div class="e-tabs__separator">
Second tab
</div>
</div>
</div>
</e-dialog-header>
<p>
Esse dolore ut sit sed duis ipsum, officia. Laboris magna exercitation, quis officia deserunt id. Consequat consequat, duis in laborum, consequat veniam qui anim in, pariatur ut. Ea esse, id sint laborum, aliquip, duis ad culpa et sed qui. Sint cupidatat duis, qui anim minim, laboris, tempor fugiat amet.
</p>
<p>
Sed officia ea, dolor sed velit esse, laboris, fugiat, ut duis sed. Est ea, ullamco voluptate sunt cillum. Officia esse dolor, velit voluptate ut labore dolore velit? Elit do, officia dolore fugiat ex aute, sunt sint, dolor reprehenderit? Cupidatat est, dolore mollit, occaecat irure irure non et.
</p>
</e-dialog>
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-header">Open Dialog</e-dialoghandler><e-dialog id="dialog-header" headline="Custom Header Title"><e-dialog-header><div class="e-tabs e-tabs-dialogheader"><div class="e-tabs__title e-tabs__title-active"><div class="e-tabs__separator">First tab</div></div><div class="e-tabs__title"><div class="e-tabs__separator">Second tab</div></div></div></e-dialog-header><p>Mollit sed consequat ut, est quis in consectetur cillum? Consectetur aliquip do pariatur pariatur ut, aliquip sed sint labore, cupidatat. Consequat, culpa qui exercitation non mollit, veniam incididunt reprehenderit. Enim in ut, do anim pariatur in ut irure excepteur exercitation. Dolore, do commodo sint dolore ut, elit, tempor, et, pariatur quis reprehenderit? </p><p>Dolore ipsum culpa ut in sint cillum esse id occaecat magna. Reprehenderit, proident aute veniam, mollit, reprehenderit reprehenderit ad in dolor. Anim labore occaecat, sint nulla elit, velit. Ut nulla commodo sed, sint, qui. Consequat qui in, sit sed nulla. Est dolore lorem qui, sit, tempor, laboris veniam nulla ut. Voluptate adipiscing velit, exercitation ea non excepteur officia dolore et. </p></e-dialog>First tab
Second tab
Enim dolore nostrud aute, laborum dolor laboris sint nisi minim duis? Nulla dolore, lorem commodo velit laborum anim esse sint enim dolor, reprehenderit? Occaecat, voluptate sit dolor tempor tempor excepteur ad fugiat, voluptate cillum. Esse aute amet labore qui do ad officia aute, nulla pariatur amet nisi in? Eu incididunt veniam exercitation, sit esse anim sit. Consectetur, tempor, dolor ut culpa ea voluptate, laboris, minim. Sunt lorem sunt voluptate reprehenderit non.
Sit, voluptate, aute adipiscing eu dolor exercitation. In adipiscing minim laborum duis in tempor. Irure elit magna occaecat laboris, non esse duis incididunt dolore ut sit consectetur? Id irure ut quis eu elit ex cupidatat. Laboris sint duis voluptate in proident voluptate dolore sed eiusmod.
Create on the fly with events
<button class="e-btn on_the_fly">
Create Dialog
</button>
<script>
var dialog = document.createElement('e-dialog')dialog.addEventListener('dialog.open', function(event) { console.log(event.detail.component); });dialog.addEventListener('dialog.close', function(event) { console.log(event.detail.component); });document.querySelector('.on_the_fly').addEventListener('click', function() {dialog.open({headline: 'Success',content: 'Consectetur amet dolor, dolor magna consectetur incididunt eu duis. Quis in nostrud sint, reprehenderit eu? Incididunt do tempor sint aute occaecat.',noKeys: true,buttons: {'Close': {callback: function() {this.close();},className: 'e-flex__item'},'Close Action': {action: 'close',className: 'e-flex__item'},'Save': {autofocus: true,callback: function() {alert('Action');},className: 'e-btn-primary e-flex__item'}}});});
</script>
<button class="e-btn on_the_fly">Create Dialog</button><script>var dialog = document.createElement('e-dialog')
dialog.addEventListener('dialog.open', function(event) { console.log(event.detail.component); });
dialog.addEventListener('dialog.close', function(event) { console.log(event.detail.component); });
document.querySelector('.on_the_fly').addEventListener('click', function() {
dialog.open({
headline: 'Success',
content: 'Consectetur amet dolor, dolor magna consectetur incididunt eu duis. Quis in nostrud sint, reprehenderit eu? Incididunt do tempor sint aute occaecat.',
noKeys: true,
buttons: {
'Close': {
callback: function() {
this.close();
},
className: 'e-flex__item'
},
'Close Action': {
action: 'close',
className: 'e-flex__item'
},
'Save': {
autofocus: true,
callback: function() {
alert('Action');
},
className: 'e-btn-primary e-flex__item'
}
}
});
});
</script>Auto focus
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-focus">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-focus" headline="Lorem Title">
<p>
Ullamco voluptate tempor, officia do in id ex. Commodo ex ipsum, et irure eu. Ad sed elit, nulla, amet sunt deserunt officia labore amet.
</p>
<p>
Aliquip magna id non eiusmod duis. Dolor anim ullamco in, eiusmod incididunt, mollit elit minim, in. Sed sit ipsum ut quis aliquip aute elit, ut sed proident cupidatat. Tempor, eiusmod eiusmod, irure irure, esse? Sunt do ea incididunt sed irure ut culpa irure laboris nulla eiusmod ea? Dolore ipsum aliquip cillum ut cupidatat fugiat.
</p>
<div class="e-dialog__footer">
<div class="e-grid e-grid-small">
<div class="e-cell e-cell-small">
<button class="e-btn" data-action="close">
Close
</button>
</div>
<div class="e-cell e-cell-small">
<button class="e-btn e-btn-primary" data-action="close" data-autofocus>
Accept
</button>
</div>
</div>
</div>
</e-dialog>
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-focus">Open Dialog</e-dialoghandler><e-dialog id="dialog-focus" headline="Lorem Title"><p>Tempor nisi sed ex. Occaecat enim, adipiscing reprehenderit nostrud, do, consequat nostrud, quis cillum enim, ad. Proident, consequat ut eiusmod nulla. </p><p>Eu laborum ea ut aute qui culpa exercitation nulla ea ut? Elit, voluptate commodo consectetur pariatur incididunt tempor. Nisi duis exercitation, adipiscing in labore do in, dolor aliqua. Reprehenderit et exercitation fugiat laborum ullamco reprehenderit dolore, exercitation nostrud veniam? Nisi reprehenderit pariatur incididunt ut laboris aliquip pariatur tempor dolor elit sint in, et. </p><div class="e-dialog__footer"><div class="e-grid e-grid-small"><div class="e-cell e-cell-small"><button class="e-btn" data-action="close">Close</button></div><div class="e-cell e-cell-small"><button class="e-btn e-btn-primary" data-action="close" data-autofocus>Accept</button></div></div></div></e-dialog>In adipiscing minim lorem, deserunt, et duis, ad, laborum. Elit quis, sed mollit consequat dolore amet mollit esse qui magna? Id, nisi occaecat aliqua esse sunt eu veniam et exercitation esse. Sed ut, laboris veniam irure ad, qui, ad, nisi elit sint amet. Magna, cillum ea adipiscing in ut.
Lorem proident exercitation, in labore aliquip sint exercitation qui. Ut adipiscing ad voluptate, est, ut, aliquip enim, voluptate in, consequat adipiscing nulla incididunt. Cupidatat eiusmod, ea ex dolore, qui ad eu in consequat in. Qui veniam reprehenderit magna consequat, laboris magna ipsum. Irure ut veniam, in qui dolore elit.
Local
<div style="position:relative; height: 300px">
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-local">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-local" headline="Lorem Title" local="true">
<p>
Minim sit, ex laborum labore nisi officia. Enim sed ad aute aliqua anim magna magna exercitation do. Amet aliqua eu veniam, irure et in, sit. Lorem, culpa nisi, dolor lorem quis. Nostrud dolore, occaecat deserunt irure nostrud, enim. Sunt aute, quis labore tempor mollit et ea ipsum quis.
</p>
<p>
Aliquip voluptate, quis labore ut velit, cupidatat, reprehenderit, eiusmod amet commodo. Deserunt sed ex aliqua? Non aute quis nostrud et, consequat ad occaecat nulla, aliqua laboris laborum. Dolore commodo ad cillum excepteur nisi culpa. Exercitation nisi incididunt, aute enim, ipsum labore sint quis. Exercitation cupidatat ullamco fugiat ullamco tempor do adipiscing?
</p>
</e-dialog>
</div>
<div style="position:relative; height: 300px"><e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-local">Open Dialog</e-dialoghandler><e-dialog id="dialog-local" headline="Lorem Title" local="true"><p>Reprehenderit dolore in, in eu culpa, nostrud enim. Ex, proident, magna amet tempor. Dolor veniam aliqua do anim adipiscing? Laboris, sed proident commodo qui dolor in deserunt? Excepteur excepteur sunt voluptate aliqua fugiat nulla? Incididunt, dolore eiusmod elit non, in do exercitation id, ad. </p><p>Mollit non, veniam, magna ullamco, irure eu. Id, veniam nisi nulla consequat elit. Excepteur proident mollit dolore, sit? Cillum in, ipsum dolor irure velit et consequat fugiat ut, aliqua. Minim sed in velit, quis incididunt? </p></e-dialog></div>In deserunt laborum eu, consequat, minim ipsum, nostrud, proident. Amet in in cillum, in voluptate. Consectetur amet lorem fugiat, duis non, et, voluptate. Mollit ad, ex, consectetur tempor duis ad et.
In ut, dolor, sit exercitation id fugiat. Ex, enim aute do non, exercitation elit laborum ad. Sunt, aliqua labore laboris ut, reprehenderit cillum enim, enim. Proident in elit sunt lorem ea elit eiusmod magna.
Image
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-image">
Open Dialog
</e-dialoghandler>
<e-dialog class="e-dialog-img" id="dialog-image" headline="Lorem Ipsum Dolor Title">
<img src="http://www.placecage.com/c/150/500" alt="Cage Rage">
</e-dialog>
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-image">Open Dialog</e-dialoghandler><e-dialog class="e-dialog-img" id="dialog-image" headline="Lorem Ipsum Dolor Title"><img src="http://www.placecage.com/c/150/500" alt="Cage Rage"></e-dialog>Iframe
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-iframe">
Open Dialog
</e-dialoghandler>
<e-dialog class="e-dialog-iframe" id="dialog-iframe" height="500px">
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog>
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-iframe">Open Dialog</e-dialoghandler><e-dialog class="e-dialog-iframe" id="dialog-iframe" height="500px"><iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe></e-dialog>Cached iframe
<a class="e-btn e-btn-primary" dialog="#dialog-iframe-cache">
Open Dialog
</a>
<e-dialog class="e-dialog-iframe" id="dialog-iframe-cache" height="500px" cache="true">
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog>
<script>
document.querySelector('[dialog="#dialog-iframe-cache"]').addEventListener('click', function() {document.querySelector('#dialog-iframe-cache').open();});
</script>
<a class="e-btn e-btn-primary" dialog="#dialog-iframe-cache">Open Dialog</a><e-dialog class="e-dialog-iframe" id="dialog-iframe-cache" height="500px" cache="true"><iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe></e-dialog><script>document.querySelector('[dialog="#dialog-iframe-cache"]').addEventListener('click', function() {
document.querySelector('#dialog-iframe-cache').open();
});
</script>Resize
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-resize">
Open Dialog
</e-dialoghandler>
<e-dialog class="e-dialog-iframe e-dialog-untitled" id="dialog-resize" width="50%" height="500px">
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog>
<e-dialoghandler class="e-btn e-btn-primary" dialog="#dialog-resize">Open Dialog</e-dialoghandler><e-dialog class="e-dialog-iframe e-dialog-untitled" id="dialog-resize" width="50%" height="500px"><iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe></e-dialog>Disabled
<e-dialoghandler class="e-btn e-btn-primary e-btn-disabled" dialog="#dialog-disabled" disabled>
Open Dialog
</e-dialoghandler>
<e-dialog class="e-dialog-iframe e-dialog-untitled" id="dialog-disabled">
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog>
<e-dialoghandler class="e-btn e-btn-primary e-btn-disabled" dialog="#dialog-disabled" disabled>Open Dialog</e-dialoghandler><e-dialog class="e-dialog-iframe e-dialog-untitled" id="dialog-disabled"><iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe></e-dialog>With action
<e-dialoghandler class="e-btn" dialog="#dialog-with-action">
Open Dialog
</e-dialoghandler>
<e-dialog headline="Import Contacts" id="dialog-with-action">
<e-dialog-action>
<e-dialog-action-title>
Create Auto-Import
</e-dialog-action-title>
<e-dialog-action-content>
Set up an automation that fetches a file with a list of contacts from an SFTP or WebDAV folder, to add it to your Emarsys contact database.
</e-dialog-action-content>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-media>
<e-icon icon="user" size="middle"></e-icon>
</e-dialog-action-media>
<e-dialog-action-container>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
</e-dialog-action-container>
</e-dialog-action>
<e-dialog-action disabled disabled-tooltip="Disabled tooltip">
<e-dialog-action-media>
<e-icon icon="user" size="middle"></e-icon>
</e-dialog-action-media>
<e-dialog-action-container>
<e-dialog-action-title>
Import File Manually
<e-tooltip content="Test" type="helper"></e-tooltip>
</e-dialog-action-title>
<e-dialog-action-content>
Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
</e-dialog-action-content>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action-container>
</e-dialog-action>
<e-dialog-action>
<e-dialog-action-title>
Import File Manually
</e-dialog-action-title>
<e-dialog-action-footer>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
<e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
<span class="e-helperlink__text">
Learn more
</span>
</a>
</e-dialog-action-footer>
</e-dialog-action>
</e-dialog>
<e-dialoghandler class="e-btn" dialog="#dialog-with-action">Open Dialog</e-dialoghandler><e-dialog headline="Import Contacts" id="dialog-with-action"><e-dialog-action><e-dialog-action-title>Create Auto-Import</e-dialog-action-title><e-dialog-action-content>Set up an automation that fetches a file with a list of contacts from an SFTP or WebDAV folder, to add it to your Emarsys contact database.</e-dialog-action-content><e-dialog-action-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-dialog-action-footer></e-dialog-action><e-dialog-action><e-dialog-action-title>Import File Manually</e-dialog-action-title><e-dialog-action-content>Upload a file that contains a list of contacts, to add it to your Emarsys contact database.</e-dialog-action-content><e-dialog-action-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-dialog-action-footer></e-dialog-action><e-dialog-action><e-dialog-action-title>Import File Manually</e-dialog-action-title></e-dialog-action><e-dialog-action><e-dialog-action-title>Import File Manually</e-dialog-action-title><e-dialog-action-content>Upload a file that contains a list of contacts, to add it to your Emarsys contact database.</e-dialog-action-content></e-dialog-action><e-dialog-action><e-dialog-action-media><e-icon icon="user" size="middle"></e-icon></e-dialog-action-media><e-dialog-action-container><e-dialog-action-title>Import File Manually</e-dialog-action-title><e-dialog-action-content>Upload a file that contains a list of contacts, to add it to your Emarsys contact database.</e-dialog-action-content></e-dialog-action-container></e-dialog-action><e-dialog-action disabled disabled-tooltip="Disabled tooltip"><e-dialog-action-media><e-icon icon="user" size="middle"></e-icon></e-dialog-action-media><e-dialog-action-container><e-dialog-action-title>Import File Manually <e-tooltip content="Test" type="helper"></e-tooltip></e-dialog-action-title><e-dialog-action-content>Upload a file that contains a list of contacts, to add it to your Emarsys contact database.</e-dialog-action-content><e-dialog-action-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-dialog-action-footer></e-dialog-action-container></e-dialog-action><e-dialog-action><e-dialog-action-title>Import File Manually</e-dialog-action-title><e-dialog-action-footer><a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank"><e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon><span class="e-helperlink__text">Learn more</span></a></e-dialog-action-footer></e-dialog-action></e-dialog>Floating page
<div class="e-buttongroup">
<a class="e-btn" href="#0" id="flaotingPage">
Open Floating Page
</a>
<a class="e-btn" href="#0" id="flaotingPageFullHeight">
Open Fullheight Layout
</a>
</div>
<script>
document.getElementById('flaotingPage').addEventListener('click', function() {window.e.utils.openFloatingPage({url:'https://redirector-staging.eservice.emarsys.com/ui/latest/doc/dialoginiframe.html'})});document.getElementById('flaotingPageFullHeight').addEventListener('click', function() {window.e.utils.openFloatingPage({url: 'https://redirector-staging.eservice.emarsys.com/ui/latest/doc/dialoginiframefullheight.html'})});
</script>
<div class="e-buttongroup"><a class="e-btn" href="#0" id="flaotingPage">Open Floating Page</a><a class="e-btn" href="#0" id="flaotingPageFullHeight">Open Fullheight Layout</a></div><script>document.getElementById('flaotingPage').addEventListener('click', function() {
window.e.utils.openFloatingPage({url:'https://redirector-staging.eservice.emarsys.com/ui/latest/doc/dialoginiframe.html'})
});
document.getElementById('flaotingPageFullHeight').addEventListener('click', function() {
window.e.utils.openFloatingPage({url: 'https://redirector-staging.eservice.emarsys.com/ui/latest/doc/dialoginiframefullheight.html'})
});
</script>API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| headline | This is the title of the dialog window | string | - | |
| no-keys | Disables the ESC key to prevent closing with it | boolean | false | |
| no-close | Disables every interaction related to close | boolean | false | |
| local | If set to true, dialog will opens locally in it's parent container. See example above | boolean | false | |
| width | Width of the dialog in any CSS metric | string | - | |
| height | Height of the dialog in any CSS metric | string | - | |
| preventClose | When true, dialog cannot be closed | boolean | - |
Method
| Name | Description |
|---|---|
open([object]) | Opens the dialog, and when the right object has passed, it can also build a popup. See example above |
setContent([string]/[domNode]) | Changes the content of dialog with the given parameter in opened state. It restores original content on close |
setHeader([string]/[domNode]) | Appends a secondary header to the dialog with the given parameter in opened state. It restores original headers on close |
Events
| Event | Description | Returns |
|---|---|---|
dialog.open | Fires on open | {
detail: {
component: [as object]
}
} |
dialog.close | Fires on close | {
detail: {
component: [as object]
}
} |
dialog.beforeClose | Fires on before close | {
detail: {
component: [as object]
}
} |
Floatingpage API Reference
Method
| Name | Description |
|---|---|
window.e.utils.openFloatingPage({url: url}) | Opens the floatingpage with iframe. The iframe url come from parameter. |
window.e.utils.closeFloatingPage() | Close all floatingpage on the page. You can call in or outside from iframe. |
e-dialog-action API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| key | An identifier for tracking events. It should be unique. | string | ||
| disabled | Disabled state. Does not fire trigger event if true. | boolean | false | |
| disabled-tooltip | Defines tooltip for disabled actions. | string |
Events
| Event | Description | Returns |
|---|---|---|
trigger | Fires on clicking the action. | |
Dialog
Guidelines
When you add a new dialog to the UI, it should pass each of the following guidelines. You must have a strong reason to break any of these.
- Dialogs should be focused, we want the user to do one task, action or decision without interruption.
- Dialogs should be positioned in the vertical and horizontal center of the screen.
- Use an overlay below the dialog (and on top of the app). This helps the users focus on their task.
- Have meaningful title fixed at top, that tells the user what this dialog is about.
- Have closing “x” in top right corner that cancels the dialog. This provides a safe escape route if the user arrived here by mistake.
- Make sure that outside click and ESC should also close the modal, the same way as the "x" does.
- Choose the right size for your dialog, so the content is not scrolling for most users.
- Have a separator between the content and the buttons.
- Have at least a “Close” (or “Cancel”) secondary button besides any additional actions buttons (with max 1 primary button).
- For dialogs with destructive actions, use e-btn-danger as primary button.
- Align the action buttons to the left.
Confirmation Dialogs
Confirmation dialogs are dialog patterns which act as “final steps” before committing to an action that has a specific, potentially destructive consequence.
Delete Confirmation Dialog
The delete confirmation should be triggered when the user initiates an action that will be deleting or discarding a resource.
This dialog both communicates the permanent destructivity of the action, and acts as a safety measure against accidental user inputs.
- The headline of this dialog must be framed as a short, easy-to-comprehend question, and the user must answers this question by clicking an action button. The headline can refer to the resource as a generic type.
- The close button of this dialog must act as a “back to safety” (or “cancel”) button.
- The dialog contains a description that elaborates on the effect of the action, and refers to the resource to be deleted by name (if possible).
- Contextual content and controls in this dialog can be included, e.g. an “assign roles to another user” control when deleting a user. This depends heavily on when and where the dialog is used.
- Cancel button: this “back to safety” action button must be the first in line, and must have the focus by default.
- Delete button: must explicitly answer the confirmation question asked in the dialog’s headline with a keyword. The label must convey destructivity and danger even if the user doesn’t read the confirmation question.
Example for an overly simple, generic delete confirmation that could be used in most places:
“Delete this? Once deleted, it cannot be accessed anymore. Cancel, Delete”
Example for a more specific, custom confirmation that can be used in a specific context:
“Delete this campaign? Once deleted, the campaign “newsletter 171206” cannot be accessed anymore. You will not be able to send it to recipients. You will not be able to use it in automation workflows. Cancel, Delete”
Leave Confirmation Dialog
The leave confirmation dialog should generally be triggered when the user wants to leave a page in which they’ve inputted data, and upon leaving this data will be discarded.
This dialog both communicates the permanent destructivity of the action, and acts as a safety measure against accidental user inputs.
- The headline of this dialog must be framed as a short, easy-to-comprehend question, and the user must answers this question by clicking an action button. The headline can refer to the resource as a generic type.
- The close button of this dialog must act as a “back to safety” (or “cancel”) button.
- The dialog contains a description that elaborates on the effect of the action, and refers to the resource to be deleted by name (if possible).
- Cancel button: this “back to safety” action button must be the first in line, and must have the focus by default.
- Delete button: must explicitly answer the confirmation question asked in the dialog’s headline with a keyword. The label must convey destructivity and danger even if the user doesn’t read the confirmation question.
Example for an overly simple, generic leave confirmation that could be used in most places:
“Discard changes? By leaving this page, all your unsaved changes will be lost. Stay, Discard and Leave”
Example for a more specific, custom confirmation that can be used in a specific context:
“Discard changes? By leaving this page, all your unsaved changes in the campaign “newsletter 171206” will be lost. Stay, Discard and Leave”