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.
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 Warnings use e-btn-warning as primary button. For Alerts use e-btn-danger as primary button.
- Align the action buttons to the left.
| Last update: | () |
| Message | feat(dialog): v1 version |
| Committer: | rudywaltz |
| Version history | |
Default
<e-dialoghandler dialog="#dialog-default" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-default">
<p>
Cupidatat fugiat, laborum ex, excepteur nulla ut eu fugiat veniam ipsum dolore veniam. Culpa cillum nostrud labore, excepteur exercitation reprehenderit? Dolor, ut aute in, aute ut et et? In consectetur non, consectetur aute minim aute, esse aute.
</p>
<p>
Deserunt proident esse ex, esse proident laboris nulla, et incididunt exercitation aliquip elit? Ut ullamco duis adipiscing eiusmod, nostrud, consectetur. Irure ut eu fugiat ut, sed magna. Occaecat non ut qui laborum, fugiat, reprehenderit exercitation est officia, culpa in. Sit sunt, commodo, exercitation reprehenderit, in aliqua elit?
</p>
</e-dialog>
<e-dialoghandler dialog="#dialog-default" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-default">
<p>Dolor esse, dolor aute, voluptate, voluptate ut excepteur aliquip? Aliquip non id excepteur esse incididunt do, amet dolore ipsum nostrud. Cillum sit fugiat tempor, in, dolore. Do deserunt aliqua ullamco esse in excepteur sint voluptate amet amet anim ut? Nostrud sit adipiscing irure nisi elit deserunt, deserunt. Quis, laboris aute commodo sit ut dolor magna dolor.
</p>
<p>Nostrud, ad mollit, sit, ad anim est amet eu, nulla laborum. Mollit culpa veniam excepteur mollit amet commodo proident. Sit dolore sint, voluptate in, magna proident, consequat. Duis anim enim cupidatat dolor, non fugiat reprehenderit laboris, excepteur veniam, esse? Laboris sit nostrud et aliqua pariatur excepteur aliqua adipiscing, esse in lorem ut, adipiscing?
</p>
</e-dialog>Et ad incididunt duis officia ullamco laboris irure eu in occaecat sit nostrud voluptate? Sint elit mollit minim enim sed sit velit. Aliqua, nulla qui duis esse dolor, laboris est commodo dolor aute. Cillum, aute eiusmod dolor, aliquip magna magna.
Nisi aliquip deserunt irure amet, do dolore anim ea, eu elit, anim. Enim commodo adipiscing anim reprehenderit. Ea lorem dolor eiusmod consectetur culpa voluptate dolor. Dolor, ipsum duis. Tempor ipsum ipsum in commodo amet cillum, ut commodo culpa, tempor.
Component Variation
is
<button is="e-dialoghandler-button" dialog="#dialog-is" class="e-btn e-btn-primary">
Open Dialog
</button>
<e-dialog id="dialog-is" headline="Lorem Title">
<p>
Consectetur dolor est, ad dolor mollit. Dolor elit qui aliquip fugiat, consequat et elit. Exercitation, in amet qui excepteur officia qui commodo, culpa dolor, sed eiusmod, elit. Qui culpa esse tempor ad lorem ex mollit.
</p>
<p>
Commodo pariatur, irure consequat est id aute et eu cillum lorem in. Cupidatat culpa lorem, proident labore amet occaecat in? Nisi dolore in in dolor ea, enim ex? Quis lorem reprehenderit voluptate deserunt, tempor, magna, id. Do culpa labore nulla fugiat. Sit in eu, nostrud, ea dolore laboris, dolor ut anim fugiat, aliquip occaecat. Ut dolor deserunt minim cupidatat minim veniam non. Sunt amet nisi minim ut pariatur dolore id ullamco, elit.
</p>
</e-dialog>
<button is="e-dialoghandler-button" dialog="#dialog-is" class="e-btn e-btn-primary">Open Dialog</button>
<e-dialog id="dialog-is" headline="Lorem Title">
<p>Labore et voluptate, adipiscing do nostrud laboris consequat minim. Magna exercitation eu ex laboris irure, sunt voluptate, ut ut, veniam dolor? Pariatur ad ullamco eiusmod, reprehenderit qui, cillum sed pariatur labore exercitation enim. Deserunt occaecat elit in magna. Officia nulla tempor, fugiat, ut, qui, sunt ullamco quis ea adipiscing dolor laborum. Deserunt lorem, eiusmod anim, officia ad deserunt, fugiat, nulla.
</p>
<p>Laborum, veniam, ut nisi in laborum magna amet nisi sed exercitation, dolor adipiscing deserunt in. Commodo aliquip, consequat, occaecat, dolore, veniam laboris sint ut? Do qui ea, sed in laboris eu minim ullamco. Lorem, cillum, elit ullamco culpa deserunt, ad anim officia. Ipsum, proident reprehenderit dolor, eiusmod, pariatur culpa sunt duis?
</p>
</e-dialog>Enim consequat enim irure et, irure lorem et consectetur, cillum voluptate in eu reprehenderit. Magna, amet elit, nostrud reprehenderit, dolore, nulla irure veniam. Do pariatur, dolore labore velit ut minim? Qui fugiat, nisi dolor quis, velit, in labore tempor labore occaecat.
Duis, sit dolor elit excepteur ut eu nulla? Eu occaecat dolor ut nostrud, lorem in, laborum adipiscing quis ipsum, minim. Mollit veniam minim labore, veniam voluptate officia ad consectetur? Ea occaecat commodo quis esse elit commodo, cillum nisi, qui est consectetur aliquip?
Title
<e-dialoghandler dialog="#dialog-title" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-title" headline="Lorem Title">
<p>
Ad ad incididunt in, exercitation minim, ipsum aliqua, ut, fugiat aliqua, et. Nulla exercitation ipsum anim pariatur est ut amet, incididunt, aute veniam, eu. Velit ipsum mollit est laboris magna incididunt, ullamco dolore. Culpa quis dolore, proident velit, reprehenderit et aliquip ex est esse tempor eu. Minim, dolore, sit quis labore, aute.
</p>
<p>
Ut sint lorem velit ullamco adipiscing duis pariatur non, eu. Laborum commodo consectetur occaecat cillum ut irure veniam culpa. Enim, voluptate in ad enim? Adipiscing adipiscing voluptate sint dolor sed esse. Ut laboris elit laboris sint proident elit, velit ut veniam adipiscing? Laboris commodo, ut excepteur, dolor elit sint mollit cupidatat veniam lorem lorem.
</p>
</e-dialog>
<e-dialoghandler dialog="#dialog-title" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-title" headline="Lorem Title">
<p>Adipiscing proident amet, sunt reprehenderit velit duis laboris. Sint nulla, reprehenderit amet ex proident enim nulla, consequat. Ipsum elit, nisi, esse fugiat nulla tempor reprehenderit minim, fugiat, dolore. Culpa elit nisi ipsum culpa nulla qui ut adipiscing velit.
</p>
<p>Labore ut eu commodo laborum aliqua in enim dolore ut. Lorem dolor ipsum aliquip irure, nisi ex, dolor, in irure ut excepteur? Sit dolore enim sit sit, ea commodo elit ut labore ad. Velit id veniam non, adipiscing, et, et enim tempor, sed occaecat et eu exercitation. Dolor sunt aliqua in cupidatat fugiat, cillum sint ut, dolor nostrud, dolor nulla. Deserunt, irure magna in in, occaecat, dolor culpa dolore.
</p>
</e-dialog>Est do, magna, exercitation duis qui, nulla nulla voluptate id ipsum minim, dolor sunt exercitation anim. Amet do tempor, esse, incididunt laboris in. Dolor minim, do, sed magna in. Excepteur anim nostrud id, sint mollit amet mollit sunt, sed anim aute tempor. Non ut dolor aliqua in sint. Velit consequat, aliquip aute et aliqua, sint irure. Ut laboris, officia voluptate sed in dolor ut, sint.
Velit, excepteur ullamco quis mollit ut amet proident. Aliquip lorem proident est, dolor velit. Sed, aliquip sed officia ut et sunt tempor. Aliquip minim sed, ex exercitation nisi nisi ut minim exercitation. Cupidatat amet ut amet, ullamco commodo, consequat aliquip sed?
Open from script
<button onclick="document.querySelector('#dialog-js').open();" class="e-btn">
Open with JS
</button>
<e-dialog id="dialog-js" headline="Lorem Title">
<p>
Mollit voluptate mollit fugiat, aliqua cillum reprehenderit duis elit ex ut anim. Laboris consectetur, consectetur, dolore, laboris mollit est nulla mollit adipiscing et, fugiat ad ut, duis. Ullamco excepteur irure, sint duis, fugiat sed laborum est culpa, amet reprehenderit nostrud.
</p>
<p>
Eiusmod magna id, duis amet cupidatat tempor in occaecat enim, proident ut do laborum, est dolor reprehenderit. Aliqua commodo irure, in irure, dolore, sunt culpa, laborum duis veniam nostrud anim. Quis exercitation eu ut? Ipsum dolor ullamco minim dolor qui reprehenderit anim, dolore sint, adipiscing. Ut, fugiat ipsum cupidatat qui enim quis. Sed quis, lorem consectetur deserunt consequat sint aliqua, culpa nulla nulla? Minim voluptate, irure reprehenderit amet quis aliquip est.
</p>
</e-dialog>
<button onclick="document.querySelector('#dialog-js').open();" class="e-btn">Open with JS</button>
<e-dialog id="dialog-js" headline="Lorem Title">
<p>Elit voluptate, in, minim voluptate. Ex consequat in magna amet aliquip ad enim duis incididunt dolore, id. Sunt excepteur, velit, aliqua laboris ut, tempor nostrud et? Reprehenderit consequat aliquip commodo sunt ut adipiscing ut minim, culpa do, sit pariatur, proident? Excepteur cupidatat, veniam, sit cupidatat dolor ut, sunt nisi. Dolor in esse occaecat fugiat, eiusmod aliqua ad commodo magna velit dolor.
</p>
<p>Velit, qui dolor minim ex culpa in dolore. Esse, dolor do dolore, dolore, duis ut veniam dolore occaecat consequat duis. Cillum sunt dolore proident ut excepteur. Eu aute, dolore, cillum, et.
</p>
</e-dialog>Amet labore dolor nisi, et duis. Eiusmod officia dolor dolore officia culpa.
Magna, aliquip aliquip, nostrud ullamco irure, mollit, quis irure, eiusmod, id cillum. Sunt voluptate tempor, eiusmod quis laboris sint sunt, magna officia. Deserunt occaecat culpa veniam velit officia, laboris esse, ut nulla. Est adipiscing consequat fugiat, adipiscing, eu, culpa ad, dolore lorem, dolore nulla, esse? Sunt laboris eiusmod sint dolore, qui, nulla lorem, cillum quis esse, nisi, cillum. Ad proident dolor deserunt in, adipiscing, ut, reprehenderit, reprehenderit. Mollit, minim, quis ut dolor non ut sint, officia.
No keyboard actions
<e-dialoghandler dialog="#dialog-nokeys" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-nokeys" headline="Lorem Title" no-keys="true">
<p>
In, esse, ut deserunt reprehenderit, amet non. Culpa et ut id ipsum. Quis, ad velit officia sunt dolore in velit ut ut est elit elit.
</p>
<p>
Ipsum fugiat et excepteur reprehenderit aute, excepteur exercitation. In elit laboris exercitation officia labore amet dolore, qui voluptate cupidatat ut consectetur eiusmod dolore dolor. Magna cupidatat nisi commodo veniam esse ut adipiscing. Laboris dolor, in excepteur id aliquip cupidatat pariatur ea duis, aliqua quis? Occaecat mollit pariatur id, dolor, excepteur, lorem, labore amet pariatur, adipiscing, dolore aliqua duis eu do. Aliqua, eu, in ipsum sit cillum velit esse magna sunt exercitation qui exercitation occaecat.
</p>
</e-dialog>
<e-dialoghandler dialog="#dialog-nokeys" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-nokeys" headline="Lorem Title" no-keys="true">
<p>Sit fugiat proident occaecat mollit, incididunt lorem ut laboris voluptate nisi laboris, do. Ex fugiat tempor proident, et sunt reprehenderit lorem adipiscing. Do, esse aute quis, aliquip aliqua adipiscing cupidatat fugiat ut id? Eiusmod labore dolor, velit esse tempor pariatur, sed sunt sunt. Pariatur sed deserunt, nostrud dolore sint dolore tempor, dolor eu id, quis.
</p>
<p>Eu laboris cillum amet excepteur anim minim esse, sint, proident id, quis? Dolore excepteur irure, tempor ut incididunt. Est ullamco dolor officia, veniam, consequat. Voluptate in id cupidatat veniam. Sunt velit, sint, sint laboris velit commodo proident labore sint, sit. Veniam esse lorem cillum id dolore qui pariatur. Dolore fugiat aliquip mollit cillum cillum enim, do ullamco reprehenderit dolore velit.
</p>
</e-dialog>Veniam dolor in eu cupidatat sunt officia ex adipiscing commodo nulla aute. Lorem sint officia, esse officia enim lorem eu laborum. Nulla nostrud excepteur esse, incididunt officia? Consectetur ad, nulla veniam, anim. Labore dolore labore, sit ea. Proident elit, ut, ullamco nostrud aute, nulla, ut, sunt fugiat pariatur quis.
Cupidatat excepteur ea eiusmod nostrud, pariatur, officia. Labore mollit voluptate non officia nostrud ad, magna, aute culpa sed aute? Consectetur pariatur esse, dolor non amet quis pariatur. Mollit nostrud sunt dolor esse, pariatur excepteur, excepteur, labore.
No direct close
<e-dialoghandler dialog="#dialog-noclose" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-noclose" headline="Lorem Title" no-close="true">
<p>
Ut, veniam non aliquip mollit nostrud in labore in est. Cupidatat esse laboris nostrud veniam veniam aliqua, cupidatat est, labore. Irure dolore, id enim velit dolor minim proident eiusmod, proident excepteur, commodo, laboris. Proident officia ut, consectetur culpa velit in ad. Quis ea aliquip eu dolore culpa nisi dolore ullamco reprehenderit, qui? Ea adipiscing sunt cupidatat consequat voluptate, in pariatur non nostrud. Tempor nisi in qui, nisi quis fugiat in.
</p>
<p>
Deserunt lorem exercitation ea eiusmod do velit in. In sunt ea ex ut voluptate in. Anim esse ut nostrud amet, aute, do sunt, pariatur occaecat exercitation elit? Ut ut officia, excepteur velit voluptate in ad, est, est ipsum cillum? Tempor cupidatat occaecat in cillum in qui sint dolor duis exercitation. Mollit veniam, et sint, sunt in aute. Ea nulla elit ut ut voluptate adipiscing sed consectetur, fugiat.
</p>
<a href="javascript:void(0)" data-action="close">
Close This
</a>
</e-dialog>
<e-dialoghandler dialog="#dialog-noclose" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-noclose" headline="Lorem Title" no-close="true">
<p>Cupidatat lorem proident ullamco ad cupidatat officia nulla, ad aute, velit. Sed ut officia occaecat esse labore officia, ad, nisi.
</p>
<p>Excepteur id lorem, nostrud ex dolor occaecat veniam ex. Adipiscing laboris, dolor.
</p><a href="javascript:void(0)" data-action="close">Close This</a>
</e-dialog>Consectetur, ipsum dolore aliquip velit, exercitation, dolor sunt ad, lorem commodo, enim, minim exercitation. Pariatur dolor, quis lorem elit ullamco nostrud ad duis voluptate dolor, duis in ut? Proident in ex ut dolor deserunt sint magna, consectetur? Aliqua sit in, qui, nisi, ut officia aute, enim sunt laborum.
Irure fugiat ipsum elit adipiscing ea duis ut ut dolore cupidatat reprehenderit. Cupidatat est, magna in, est id, quis deserunt consectetur. Ipsum officia culpa in dolore. Sit in qui officia labore, irure, ut, pariatur sint ullamco. Tempor cillum velit occaecat dolore reprehenderit. Voluptate exercitation, labore veniam nulla magna, aliquip ipsum aute veniam officia, tempor ea. Dolor amet sunt minim, duis sit lorem esse laboris, eiusmod commodo officia.
Close ThisFooter
<e-dialoghandler dialog="#dialog-footer" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-footer" headline="Lorem Title">
<p>
Dolore aliqua anim enim ad sunt deserunt consequat, amet ex magna. Ullamco, sed dolore, veniam, nisi, ipsum dolor laborum ex proident, in id, nostrud?
</p>
<p>
Exercitation non dolor aliquip consequat in labore magna, cillum ipsum consequat, do dolore. Officia, reprehenderit nostrud sed voluptate in, sint eu. Pariatur sit minim laborum, lorem aliqua laboris enim, occaecat labore? Velit commodo occaecat culpa, incididunt, pariatur. Mollit in dolor, voluptate aute, pariatur. Non labore ut eiusmod mollit laboris minim, esse eu irure dolor minim.
</p>
<div class="e-dialog__footer">
<div class="e-flex e-flex-condensed">
<button class="e-btn e-flex__item close_btn">
Close with Script
</button>
<button data-action="close" class="e-btn e-flex__item">
Close with Attr
</button>
<button data-action="close" class="e-btn e-flex__item">
Close with Attr
</button>
</div>
</div>
</e-dialog>
<script>
document.querySelector('.close_btn').addEventListener('click', function() { document.querySelector('#dialog-footer').close();});
</script>
<e-dialoghandler dialog="#dialog-footer" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-footer" headline="Lorem Title">
<p>Commodo laboris, incididunt cupidatat adipiscing cupidatat excepteur ut quis qui. Cupidatat reprehenderit fugiat aliquip, sint nulla consequat. Id fugiat irure, laborum laborum proident, aliqua?
</p>
<p>Sit in dolor ut esse veniam, ad, deserunt consequat, lorem. Officia deserunt minim, laboris magna, amet, officia nulla nostrud nulla aute sed id minim. Excepteur sed dolore, quis officia adipiscing cupidatat dolore magna, do? Velit, sed amet est, eiusmod ut et, minim dolor.
</p>
<div class="e-dialog__footer">
<div class="e-flex e-flex-condensed">
<button class="e-btn e-flex__item close_btn">Close with Script</button>
<button data-action="close" class="e-btn e-flex__item">Close with Attr</button>
<button data-action="close" class="e-btn e-flex__item">Close with Attr</button>
</div>
</div>
</e-dialog>
<script>
document.querySelector('.close_btn').addEventListener('click', function() {
document.querySelector('#dialog-footer').close();
});
</script>Sunt do laboris magna qui ut deserunt ea, aliqua aute eiusmod exercitation. Excepteur, consectetur nostrud fugiat dolor nostrud ipsum veniam dolor laborum est nostrud minim sed. Enim aute, quis quis, excepteur dolore pariatur veniam cillum do voluptate. Aliquip enim magna nulla commodo do consectetur ea culpa ut quis. Nisi enim, nostrud incididunt laborum non dolore nisi.
Qui ea excepteur adipiscing sunt proident aliqua elit pariatur excepteur elit? Labore esse sint id culpa ullamco, quis, non tempor id, ut, veniam laboris. Excepteur in dolor ut est minim in dolore? Sit ut enim quis dolore adipiscing aliquip sit amet.
Create on the fly with events
<button class="e-btn on_the_fly">
Create Dialog
</button>
<script>
document.querySelector('.on_the_fly').addEventListener('click', function() { 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); }); 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>
document.querySelector('.on_the_fly').addEventListener('click', function() {
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); });
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 dialog="#dialog-focus" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-focus" headline="Lorem Title">
<p>
Labore duis esse duis do do mollit, ex?
</p>
<p>
Reprehenderit, ipsum mollit nulla, dolor, pariatur dolor laborum labore sed. Veniam dolor dolore do, in quis eiusmod ad voluptate nulla lorem, ut? Eu ad dolore aliqua, ea elit magna fugiat occaecat, in ex.
</p>
<div class="e-dialog__footer">
<div class="e-flex e-flex-condensed">
<button data-action="close" class="e-btn e-flex__item">
Close
</button>
<button data-action="close" data-autofocus class="e-btn e-btn-primary e-flex__item">
Accept
</button>
</div>
</div>
</e-dialog>
<e-dialoghandler dialog="#dialog-focus" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-focus" headline="Lorem Title">
<p>Velit ut eu duis magna, consectetur et in, sint. Officia magna ex irure excepteur qui ut amet laborum. Est in irure eu ullamco enim enim, qui, esse dolore sint, non. Aliquip in aliqua minim id anim, velit consectetur aute nisi enim veniam veniam.
</p>
<p>In consequat consectetur irure proident ut ut ut duis. Dolor aute, ut, sed consequat, id lorem quis? Velit elit, excepteur eu pariatur incididunt ex eiusmod. Aute, in laboris quis anim in veniam sit, elit in, ut. Adipiscing nisi, labore officia esse commodo magna ut aute eu ut. Culpa nisi ullamco ut aliquip dolor deserunt ad, sed, amet dolore cupidatat dolore. Veniam laboris ut sed commodo, ullamco, culpa ipsum ullamco exercitation ea irure anim, commodo.
</p>
<div class="e-dialog__footer">
<div class="e-flex e-flex-condensed">
<button data-action="close" class="e-btn e-flex__item">Close</button>
<button data-action="close" data-autofocus class="e-btn e-btn-primary e-flex__item">Accept</button>
</div>
</div>
</e-dialog>Proident commodo, esse, commodo eu, sint ipsum proident cillum pariatur, do. Est irure, sit, aute id sed. Laborum id excepteur cupidatat ad ad labore. Quis magna officia, excepteur enim enim consequat tempor ut quis, sunt sint. Minim, occaecat ullamco voluptate excepteur ullamco duis magna pariatur, tempor proident mollit.
Ut in sunt culpa ea, amet labore, excepteur mollit laboris? Elit magna ipsum velit ea magna nisi. Cupidatat, dolor commodo in veniam irure cupidatat in id excepteur, consectetur magna.
Local
<div style="position:relative; height: 300px">
<e-dialoghandler dialog="#dialog-local" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-local" headline="Lorem Title" local="true">
<p>
Lorem incididunt amet, nisi deserunt irure dolor. Occaecat laborum elit deserunt do labore occaecat culpa et velit elit aliquip. Pariatur voluptate ut ut incididunt sunt, cillum ut qui, ad laboris id. Incididunt, excepteur sint sed, pariatur, nisi cillum ipsum. Magna, quis magna, deserunt, dolore, eiusmod veniam eu nostrud.
</p>
<p>
Esse, proident dolore in ut. Duis, cupidatat laborum fugiat, sint enim. Laboris, et dolore cupidatat labore in eiusmod. Minim, excepteur amet amet ex deserunt.
</p>
</e-dialog>
</div>
<div style="position:relative; height: 300px">
<e-dialoghandler dialog="#dialog-local" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-local" headline="Lorem Title" local="true">
<p>Culpa anim consectetur cillum, in laboris. Tempor ex irure aute pariatur, ut nostrud tempor proident deserunt, quis, ut deserunt? Voluptate anim qui labore cupidatat, commodo in. Ipsum officia, eu, deserunt veniam esse nisi, dolore reprehenderit proident aliqua eu. Fugiat velit proident ullamco in, cillum duis minim aute qui est. Sunt, nisi, minim aute ad laboris dolor laborum?
</p>
<p>Proident magna incididunt do eu, aliqua ad ad. Sed cillum, id, labore quis anim, anim? Commodo deserunt in, eiusmod, qui sunt nostrud amet irure. Lorem exercitation anim nostrud laborum, culpa proident sint ut esse, ipsum. Dolore, officia non, enim laborum, proident proident adipiscing, ut deserunt do? Ea ut nulla ex proident eu id.
</p>
</e-dialog>
</div>Do anim non dolore, in, in, dolor cupidatat. Magna commodo culpa, sint eu exercitation mollit anim ut. Ullamco ea duis, sunt amet eu ut enim est? Consectetur aliqua, duis ut, aute fugiat, ad amet. Aliqua qui consectetur cupidatat dolore est consequat mollit, ea sit dolore? In laborum tempor dolore minim magna eu cupidatat pariatur, nisi consectetur proident.
Id deserunt consequat anim ipsum aliqua esse. In do in, dolor consectetur ex in labore fugiat eu deserunt id?
Image
<e-dialoghandler dialog="#dialog-image" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-image" headline="Lorem Ipsum Dolor Title" class="e-dialog-img">
<img src="http://www.placecage.com/c/150/500" alt="Cage Rage">
</e-dialog>
<e-dialoghandler dialog="#dialog-image" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-image" headline="Lorem Ipsum Dolor Title" class="e-dialog-img"><img src="http://www.placecage.com/c/150/500" alt="Cage Rage"></e-dialog>Iframe
<e-dialoghandler dialog="#dialog-iframe" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-iframe" height="500px" class="e-dialog-iframe">
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog>
<e-dialoghandler dialog="#dialog-iframe" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-iframe" height="500px" class="e-dialog-iframe">
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog>Resize
<e-dialoghandler dialog="#dialog-resize" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-resize" width="50%" height="500px" class="e-dialog-iframe e-dialog-untitled">
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog>
<e-dialoghandler dialog="#dialog-resize" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-resize" width="50%" height="500px" class="e-dialog-iframe e-dialog-untitled">
<iframe src="https://redirector.eservice.emarsys.net/ui/latest/doc/index.html"></iframe>
</e-dialog>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 | - |
Method
| Name | Description |
|---|---|
| open([object]) | Opens the dialog, and when the right object has passed, it can also build a popup. See example above |
| openInParent([object]) | Opens the dialog in the parent frame (useful if your integration is in an iframe) |