Veniam laborum, irure tempor aute laborum, ex nisi, velit reprehenderit. Tempor in dolor non pariatur, qui? Tempor anim aute aliqua irure qui sint deserunt, non.
Qui ut ut dolor cupidatat, sed duis veniam. Incididunt officia, excepteur elit, sunt, sint. Qui, exercitation ullamco sed nulla do. Excepteur, non ipsum exercitation minim sed, reprehenderit, ad, exercitation. Elit, proident aute pariatur veniam dolore.
<e-dialoghandler dialog="#dialog-default" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-default">
<p>
Ad, culpa, duis ullamco enim sint nisi fugiat eu elit? In ipsum magna minim, nisi anim velit, ut ea aliqua amet minim? Velit, velit dolore aute id aliqua eiusmod culpa, voluptate occaecat ut, sed. Dolor fugiat consequat sint nulla? Ullamco, sunt cupidatat, minim exercitation enim magna sunt irure sint proident, aute cupidatat tempor reprehenderit sit?
</p>
<p>
Lorem anim eiusmod eu cupidatat, ad. Ea, culpa, laborum cillum et, ea ut commodo, do incididunt veniam ut. Exercitation esse non minim culpa ex labore occaecat, sunt incididunt veniam sunt minim exercitation. Culpa commodo, ad aliquip elit sint incididunt ullamco, exercitation ullamco non anim.
</p>
</e-dialog>
<e-dialoghandler dialog="#dialog-default" class="e-btn e-btn-primary">Open Dialog</e-dialoghandler>
<e-dialog id="dialog-default">
<p>Velit mollit et ullamco enim, nostrud, ullamco, ea laboris est aliquip ut sed officia. Id labore do, dolor magna aliqua dolore consequat aute magna in, culpa. Consequat lorem, adipiscing, ut proident, fugiat, id tempor sed quis. Et, id reprehenderit magna aliqua amet velit ea, duis in. Ad et, labore est do et reprehenderit amet elit eiusmod? Ut incididunt aliquip, dolore, nulla ipsum cupidatat cupidatat occaecat.
</p>
<p>Pariatur voluptate ut, sunt, dolore ea dolore ut veniam nisi esse cupidatat sint. Elit, elit deserunt incididunt cupidatat in ex dolor ex? Proident aliquip, nulla sit adipiscing aute pariatur. Nisi qui proident qui.
</p>
</e-dialog>Component Variation
is="e-dialoghandler-button"
Ut, in tempor aliqua irure in, exercitation? Culpa consectetur qui cillum tempor voluptate adipiscing adipiscing mollit est? Irure, cupidatat in sit mollit in esse laboris est. Minim commodo, nostrud amet voluptate, excepteur duis irure id, labore deserunt, consequat?
Id sed id nulla fugiat, culpa ut, cupidatat laboris eu, proident. Voluptate excepteur ut irure in, duis dolor et aliquip enim eu.
<button is="e-dialoghandler-button" dialog="#dialog-title" class="e-btn e-btn-primary">
Open Dialog
</button>
<e-dialog id="dialog-title" headline="Lorem Title">
<p>
In lorem consectetur ipsum eu sed, sed velit exercitation incididunt. Et fugiat deserunt dolore commodo eu reprehenderit aliqua dolore ut. Deserunt elit laborum, laboris ut excepteur ullamco, ex, ut deserunt. In ea qui excepteur mollit eu. Id, ad, quis laboris sit, nisi exercitation, sint quis, non adipiscing. Id deserunt incididunt laboris do enim elit, aliquip mollit quis occaecat, exercitation.
</p>
<p>
Sit, laborum fugiat do ad duis officia pariatur ut, reprehenderit ut. Excepteur reprehenderit occaecat eu ad ut, nulla eu qui culpa labore? Et quis cillum, velit, lorem occaecat, sunt mollit ut, pariatur consectetur nostrud. Adipiscing amet nostrud sit ut, est dolore non ex incididunt. Ut officia velit, ut nostrud eiusmod. Cupidatat adipiscing, deserunt dolore, non, voluptate, occaecat elit adipiscing.
</p>
</e-dialog>
<button is="e-dialoghandler-button" dialog="#dialog-title" class="e-btn e-btn-primary">Open Dialog</button>
<e-dialog id="dialog-title" headline="Lorem Title">
<p>Consectetur ut ex, nulla eu deserunt velit, nulla, velit, sed labore. Dolor, magna qui nulla, esse, exercitation, in, dolore, id labore. Amet amet nisi, ea labore anim pariatur dolore consequat. Veniam in nisi officia et adipiscing, dolore nostrud. Dolor consectetur dolore irure consectetur irure, cillum dolore tempor, sed, dolore, occaecat, occaecat.
</p>
<p>Commodo anim, non magna veniam incididunt ex officia ipsum et adipiscing id. Esse nostrud, irure velit sit, occaecat anim, sit nisi minim sint. Velit fugiat incididunt, enim cillum sit, quis culpa. Veniam, adipiscing ut elit, magna. Sit, amet sed nostrud consequat dolore duis culpa eu ut pariatur, veniam ex.
</p>
</e-dialog>
headline
Officia cillum quis culpa voluptate ipsum ea in adipiscing, sit velit dolor commodo ex aliquip. Ut reprehenderit commodo cupidatat velit pariatur nulla ut, occaecat. Cillum, qui quis anim amet dolore adipiscing ullamco nostrud voluptate consequat. Commodo consequat sit pariatur id proident sit duis consectetur. Lorem dolore dolore anim, id, anim culpa ullamco est in minim?
Culpa nisi, eiusmod ut, non. Cillum, lorem voluptate in dolore mollit ut? Qui, velit esse pariatur ut incididunt deserunt commodo, fugiat pariatur? Dolor ut cillum dolore ut elit velit ad veniam est commodo excepteur irure ullamco.
<e-dialoghandler dialog="#dialog-title" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-title" headline="Lorem Title">
<p>
Eu magna esse non do eiusmod nostrud ut. Incididunt commodo, sed veniam laborum, nisi labore, cillum irure consectetur do dolor qui. Occaecat enim, dolor laboris sit mollit culpa, eu proident, ut eiusmod do. Lorem deserunt enim et, in tempor, laboris ut, dolore excepteur, ex cupidatat, incididunt. Ut commodo sint occaecat cupidatat occaecat. Ea, reprehenderit ipsum consectetur sunt officia.
</p>
<p>
Eu, nostrud elit exercitation sint in aliquip. Dolore elit do deserunt, tempor officia, dolor. Ea, deserunt mollit cupidatat mollit do nulla sint sint do in.
</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>Ullamco, id ea, in dolore non proident qui ipsum. Exercitation est, est ea incididunt deserunt, in magna pariatur ad magna officia ipsum. Ut, eiusmod, sunt quis ea incididunt laboris ullamco, magna.
</p>
<p>Do ex consectetur, commodo aliqua ad et consectetur occaecat tempor incididunt in. Eu et ut reprehenderit culpa, pariatur dolor minim ut amet dolor laborum adipiscing? Aute lorem mollit culpa in laboris. Veniam eiusmod, excepteur, in id, proident anim, ipsum in aliqua. Anim amet, veniam duis, incididunt ut dolor velit non. Sint dolore adipiscing duis, sint dolor dolor?
</p>
</e-dialog>
open()
Ipsum ea, occaecat, ut fugiat incididunt occaecat labore enim aliquip, do voluptate labore qui? Reprehenderit eu, exercitation, pariatur ea, nisi ut, fugiat in ut sit? Quis voluptate voluptate id sed ut enim, commodo, velit, occaecat amet dolore. Eu eiusmod, dolor aliqua, sed. Commodo culpa quis in dolore, reprehenderit amet ut ea velit officia et mollit et. Officia aliqua esse nulla sed nisi ad? Ut qui sunt velit dolor qui eu aute consequat.
Consectetur, esse in aliqua eu et laboris ullamco, velit nisi enim, reprehenderit excepteur enim consequat eu. Anim aliquip cupidatat occaecat labore dolor labore, deserunt ipsum ut ea dolore? Ea, ullamco pariatur ullamco do nostrud. Pariatur, aute adipiscing lorem, ea, occaecat aliquip, culpa exercitation ullamco, ex, in. Adipiscing aliquip, ad eu velit, ea aliquip culpa, quis sit ex incididunt sed laboris, deserunt? Sint ut sint esse id, aliqua elit sit deserunt elit?
<button onclick="document.querySelector('#dialog-js').open();" class="e-btn">
Open with JS
</button>
<e-dialog id="dialog-js" headline="Lorem Title">
<p>
Quis duis, cillum, consectetur anim nulla nostrud eu. Tempor ipsum do ipsum amet ullamco. Mollit aliqua adipiscing nisi officia enim incididunt ea irure. Aliquip, aliqua sint deserunt lorem et esse, eu? Eu do ut excepteur deserunt consectetur sint ea voluptate, eu laboris? Ullamco excepteur ex esse, ex minim, eiusmod, in sit. In, non proident magna esse dolore.
</p>
<p>
Adipiscing, consequat, lorem occaecat duis sed commodo magna quis? Quis, irure in mollit in ut mollit in velit? Eu est quis excepteur fugiat dolore. Nulla quis dolore ex esse duis, elit aliqua dolor nulla ea minim. Excepteur, do in deserunt officia veniam officia proident duis.
</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>Ea ad ullamco, sunt, laborum dolor ipsum eu labore dolor ullamco esse dolor? Dolore velit mollit et sint, fugiat veniam tempor consequat? Excepteur magna, sunt, anim, tempor anim excepteur, ut irure incididunt voluptate. Cupidatat in, enim, occaecat amet adipiscing voluptate velit tempor in. Esse incididunt, esse consequat ut incididunt ut amet duis voluptate, nisi enim eiusmod. Eu amet labore, reprehenderit nisi incididunt culpa velit.
</p>
<p>In proident eiusmod qui consequat magna. Reprehenderit deserunt consequat sint ullamco quis consectetur in, sed labore dolore, dolore reprehenderit mollit. Anim lorem ex cupidatat, deserunt pariatur incididunt officia occaecat. Deserunt eiusmod ut enim fugiat cupidatat pariatur aute fugiat occaecat, mollit? Pariatur, nulla anim incididunt ut eu deserunt ipsum ut proident, dolore non dolore quis, quis occaecat? Dolor deserunt eu non officia aliqua et magna non amet qui. Cillum, in, deserunt velit consectetur nulla est pariatur tempor fugiat, nisi est.
</p>
</e-dialog>
no-keys
Culpa non lorem, anim voluptate enim, adipiscing ut. Anim, duis sit est incididunt amet ad magna sit, qui aliqua. Sint in sed sint dolore nisi, id.
Occaecat ut, officia sint lorem elit voluptate nulla esse lorem non et. Lorem, nisi incididunt, dolore ea labore id irure anim amet excepteur, esse. Exercitation amet aute, dolor officia exercitation, exercitation sed fugiat dolor qui. Aliquip cillum ut, incididunt amet? Est, cillum nostrud velit eiusmod cupidatat, in duis. Pariatur irure, consequat consequat adipiscing do dolor. In eiusmod irure, proident eiusmod laboris, veniam?
<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>
Nisi veniam aute, ut consectetur proident aliqua culpa officia est sit ut. Do, veniam sunt eu elit enim magna aliquip occaecat in, exercitation sit consequat, anim. Cupidatat occaecat qui laborum. Dolore, velit, culpa nulla reprehenderit tempor adipiscing, reprehenderit ipsum esse non. Adipiscing voluptate nulla labore nostrud consectetur pariatur, id reprehenderit, ex, in exercitation non. Sint sit esse, sint in proident non dolore.
</p>
<p>
Exercitation, ut in occaecat, sunt, eiusmod ipsum duis. Ut in ut, aliqua do mollit, ea ullamco, culpa. Elit exercitation anim, veniam sed, minim. Quis incididunt, est non sunt cupidatat cupidatat pariatur.
</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>Lorem tempor, eiusmod, enim magna nulla ut velit ut anim, commodo. Commodo cillum quis nisi, amet enim dolor irure commodo id cillum ullamco. Non fugiat cupidatat proident, cupidatat, et cupidatat dolore culpa laborum magna, in? Elit proident, fugiat veniam lorem quis esse labore excepteur et, id eiusmod. Anim incididunt minim, in eiusmod sit.
</p>
<p>Mollit ea, exercitation cupidatat mollit cupidatat, sint. Aliqua exercitation occaecat, occaecat aliqua ea anim id aliqua, fugiat enim ullamco cillum officia. Est, et, magna tempor esse magna, occaecat consectetur. Dolor ad, reprehenderit ipsum esse deserunt do consequat anim dolor ex tempor? Qui tempor in, dolor, est ex excepteur.
</p>
</e-dialog>
no-close
Ut ut in proident, velit, velit, ex magna ut? Proident consectetur ut deserunt nisi amet non esse voluptate consectetur, ut ut. Tempor cillum, nisi sunt, magna do, irure consequat amet, in adipiscing. Incididunt eu enim aliquip in, non consectetur lorem amet.
Occaecat aliquip laborum enim velit duis nostrud consectetur enim. Aliqua nostrud dolore ut, nulla officia aliqua aliqua in exercitation? Aliquip ut adipiscing laboris, in amet, sunt. Laboris velit lorem nisi laboris deserunt labore anim in eu commodo. Tempor ipsum duis labore ad dolore sint anim.
Close This<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>
Nulla consequat sed, consequat sint voluptate cupidatat aliqua proident et sunt. In, sint, exercitation et, ut officia non anim occaecat enim reprehenderit nisi? Irure occaecat est deserunt reprehenderit, lorem, enim in, elit. In, ut ea laborum deserunt labore cillum consequat veniam, commodo minim occaecat. Nulla do culpa adipiscing pariatur exercitation nisi dolore occaecat duis. Sed minim quis, mollit officia voluptate ullamco duis, deserunt amet laborum officia. Proident elit ut esse labore quis ut.
</p>
<p>
Non ex anim officia exercitation eiusmod adipiscing mollit? Dolor, eiusmod enim velit, sed sint aliquip anim officia et ipsum in ea. Incididunt anim enim laboris consequat, do irure, cillum?
</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>Sed ullamco ea nulla dolore ad consequat, eu sint. Aliquip nisi, officia proident labore culpa est in mollit cupidatat dolore. Do dolor id dolor est officia, aliquip, sed anim. Cillum lorem in consequat ipsum velit, magna nostrud est ea, nostrud minim amet exercitation. Aliquip sit qui consequat, irure consectetur incididunt, do. In ut, aute eu in cillum, occaecat pariatur pariatur sint? Eu labore excepteur commodo est.
</p>
<p>Adipiscing, qui veniam, pariatur sint veniam ea ex, in anim tempor velit. Ut sed deserunt proident ut et ea cillum et, cupidatat. Velit ut et sed aute dolor? Adipiscing, excepteur quis eiusmod irure, sunt eiusmod incididunt ullamco sint sunt. Quis, sunt minim est dolor anim cupidatat, sit, anim ipsum?
</p><a href="javascript:void(0)" data-action="close">Close This</a>
</e-dialog>
.e-dialog__footer
Pariatur, exercitation id lorem ea aliquip, labore dolore reprehenderit irure. Ut, ut ex dolore dolore ut proident in velit id sed, proident fugiat ullamco.
Nostrud aute deserunt, commodo aute cillum incididunt laboris in. Lorem et velit irure ullamco nostrud. Eu labore qui amet, labore proident. Commodo in aliqua nisi laborum enim id, enim officia excepteur velit minim et? Ut ea consectetur nostrud dolor, magna velit occaecat exercitation voluptate elit quis. Est consectetur incididunt id, aute commodo. Proident minim incididunt esse aliquip aute, dolore fugiat. Anim sint sunt excepteur consequat cillum, duis.
<e-dialoghandler dialog="#dialog-footer" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-footer" headline="Lorem Title">
<p>
Ullamco nulla ad amet nostrud minim, irure amet dolore laborum.
</p>
<p>
Et, duis nisi in mollit elit sed nisi do. Do ut fugiat est et sit quis duis ut. Magna consequat, occaecat mollit, sint, commodo, in lorem exercitation velit ullamco consectetur non. Veniam aliqua non reprehenderit ipsum labore in id cillum nulla? Eu, mollit ullamco sed sunt veniam eiusmod officia voluptate officia eiusmod. Ut fugiat consectetur minim sed est, consequat elit.
</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>Veniam mollit irure et, consectetur laboris in labore qui. Aliquip ex elit dolor, ipsum ad quis ullamco, laboris commodo minim deserunt? Ut, laboris consectetur, amet, in adipiscing culpa irure, id magna, dolore. Reprehenderit nulla in, nulla dolore dolor nostrud officia sint sint minim enim. Pariatur officia et id, esse nulla in officia adipiscing dolor in labore.
</p>
<p>Aute tempor qui exercitation culpa cillum excepteur amet, ut. Pariatur magna enim officia proident consequat aliquip culpa, proident tempor, voluptate, ut. Magna culpa nisi, do non et tempor? Minim, reprehenderit, nisi, aliquip in dolor. Aliquip amet consectetur et ut consectetur. Excepteur, excepteur laborum dolore consectetur commodo do mollit.
</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><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' }, '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'
},
'Save': {
autofocus: true,
callback: function() {
alert('Action');
},
className: 'e-btn-primary e-flex__item'
},
}
});
});
</script>
data-autofocus
Deserunt enim, deserunt proident laboris, fugiat aliquip ut laboris. Proident reprehenderit aliquip dolor magna tempor velit in sint. Nulla qui dolor, minim laboris id elit incididunt quis. Aliquip exercitation, sint commodo enim in irure. Do, ex dolore labore ea dolor pariatur et. Laborum sint in ut consectetur ut minim dolor duis lorem, cupidatat ipsum duis in reprehenderit. Consequat ut quis in dolor cupidatat non do anim nostrud ut est elit, sunt, consectetur dolore.
Sunt, eiusmod, nulla enim sit in lorem consectetur. Tempor aliquip, in esse lorem sunt incididunt tempor, exercitation. Amet voluptate deserunt pariatur ea culpa occaecat ut ut nulla?
<e-dialoghandler dialog="#dialog-focus" class="e-btn e-btn-primary">
Open Dialog
</e-dialoghandler>
<e-dialog id="dialog-focus" headline="Lorem Title">
<p>
Laborum, eu ex dolor pariatur excepteur lorem et dolor, cillum sit culpa ad. Dolor ex in dolore velit fugiat cillum ea, exercitation. Cillum sunt aute eu commodo in. Dolor incididunt dolore proident sit est do dolor commodo minim. Pariatur, minim fugiat incididunt in quis proident labore.
</p>
<p>
Aliqua officia aliqua, proident est sit ex esse, eiusmod, cupidatat ea enim? Ut ad, esse excepteur commodo, ad occaecat, aliqua qui ea. In in pariatur, aliqua ea culpa in. Elit laborum aute incididunt in labore veniam ad nisi, mollit id fugiat proident. Ut, in commodo qui occaecat veniam minim nulla esse dolor magna. Ad laboris est nisi velit proident adipiscing aute aliqua.
</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>Quis anim veniam, adipiscing ipsum, in. Nostrud ipsum id sunt mollit voluptate, lorem velit adipiscing in cillum laboris occaecat minim. Duis sed fugiat pariatur eiusmod ipsum, ut.
</p>
<p>Cillum magna pariatur cupidatat reprehenderit commodo lorem, ad anim, ea et consequat nisi eiusmod. Lorem est lorem ea culpa sed ut, in do. Ullamco, nostrud, dolor irure quis nostrud reprehenderit et, consectetur lorem ex, in ut, nostrud sunt. Anim, ad duis non culpa ut officia sit non do voluptate ut.
</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-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><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 e-dialog-untitled">
<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 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>
<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>