Skip to content

Dialog

This styles a <dialog> element to look like the WDS provided modal component. The <dialog> element is pretty new, but it seems to work better than the WDS modal.

To show the dialog, call .showModal() on the element. Just adding the open attribute won't work properly - using this method is required.

Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies mi quis hendrerit dolor. Sit amet aliquam id diam maecenas ultricies. Et tortor at risus viverra adipiscing at in. Eget aliquet nibh praesent tristique magna sit amet purus. Ac felis donec et odio pellentesque diam volutpat. Justo laoreet sit amet cursus sit amet. Tellus molestie nunc non blandit massa enim. Leo in vitae turpis massa sed. At ultrices mi tempus imperdiet nulla malesuada. Duis ut diam quam nulla porttitor massa id neque. Facilisi morbi tempus iaculis urna id volutpat. Molestie at elementum eu facilisis sed odio morbi. Ut placerat orci nulla pellentesque.

Convallis tellus id interdum velit laoreet id donec ultrices. Etiam dignissim diam quis enim lobortis. Tellus elementum sagittis vitae et leo duis ut diam. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Elit eget gravida cum sociis natoque penatibus et. Risus in hendrerit gravida rutrum quisque non tellus orci. Purus in mollis nunc sed id semper risus in hendrerit. Orci a scelerisque purus semper. Neque ornare aenean euismod elementum nisi quis. Eu consequat ac felis donec et odio. In massa tempor nec feugiat nisl pretium fusce id. Proin libero nunc consequat interdum varius. Eget mi proin sed libero enim sed. Blandit cursus risus at ultrices mi tempus imperdiet nulla. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Urna condimentum mattis pellentesque id.

Sollicitudin tempor id eu nisl. Quisque id diam vel quam elementum pulvinar. Tellus rutrum tellus pellentesque eu tincidunt. Pellentesque habitant morbi tristique senectus et netus et. Pellentesque elit ullamcorper dignissim cras tincidunt. Cum sociis natoque penatibus et. Amet nulla facilisi morbi tempus iaculis urna id. Elementum eu facilisis sed odio. Pellentesque habitant morbi tristique senectus. Velit laoreet id donec ultrices. Tortor id aliquet lectus proin nibh nisl. Orci phasellus egestas tellus rutrum tellus. Habitant morbi tristique senectus et netus et malesuada. Consequat interdum varius sit amet mattis vulputate enim. Dolor purus non enim praesent elementum facilisis leo vel fringilla. Morbi leo urna molestie at elementum eu facilisis sed odio. Ultrices eros in cursus turpis massa tincidunt dui ut ornare. Est sit amet facilisis magna etiam.

Lacus viverra vitae congue eu consequat ac felis donec et. Pellentesque diam volutpat commodo sed. Pharetra convallis posuere morbi leo urna molestie at. Nec nam aliquam sem et tortor consequat id porta. In aliquam sem fringilla ut morbi. Mauris sit amet massa vitae. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa. Cras semper auctor neque vitae tempus quam pellentesque nec. Blandit cursus risus at ultrices mi tempus. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Non sodales neque sodales ut etiam sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Leo integer malesuada nunc vel risus commodo. Quisque sagittis purus sit amet volutpat consequat mauris nunc. Eu ultrices vitae auctor eu augue ut. Etiam erat velit scelerisque in dictum non consectetur a erat. Penatibus et magnis dis parturient montes nascetur. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Mauris commodo quis imperdiet massa. Pretium lectus quam id leo in vitae turpis massa.

Tortor consequat id porta nibh. Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Cras ornare arcu dui vivamus arcu felis bibendum ut. Enim facilisis gravida neque convallis a. Cursus in hac habitasse platea dictumst quisque sagittis. Sit amet massa vitae tortor. Viverra orci sagittis eu volutpat odio facilisis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Risus ultricies tristique nulla aliquet enim tortor at. Amet nulla facilisi morbi tempus. Bibendum enim facilisis gravida neque convallis a cras.

Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies mi quis hendrerit dolor. Sit amet aliquam id diam maecenas ultricies. Et tortor at risus viverra adipiscing at in. Eget aliquet nibh praesent tristique magna sit amet purus. Ac felis donec et odio pellentesque diam volutpat. Justo laoreet sit amet cursus sit amet. Tellus molestie nunc non blandit massa enim. Leo in vitae turpis massa sed. At ultrices mi tempus imperdiet nulla malesuada. Duis ut diam quam nulla porttitor massa id neque. Facilisi morbi tempus iaculis urna id volutpat. Molestie at elementum eu facilisis sed odio morbi. Ut placerat orci nulla pellentesque.

Convallis tellus id interdum velit laoreet id donec ultrices. Etiam dignissim diam quis enim lobortis. Tellus elementum sagittis vitae et leo duis ut diam. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Elit eget gravida cum sociis natoque penatibus et. Risus in hendrerit gravida rutrum quisque non tellus orci. Purus in mollis nunc sed id semper risus in hendrerit. Orci a scelerisque purus semper. Neque ornare aenean euismod elementum nisi quis. Eu consequat ac felis donec et odio. In massa tempor nec feugiat nisl pretium fusce id. Proin libero nunc consequat interdum varius. Eget mi proin sed libero enim sed. Blandit cursus risus at ultrices mi tempus imperdiet nulla. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Urna condimentum mattis pellentesque id.

Sollicitudin tempor id eu nisl. Quisque id diam vel quam elementum pulvinar. Tellus rutrum tellus pellentesque eu tincidunt. Pellentesque habitant morbi tristique senectus et netus et. Pellentesque elit ullamcorper dignissim cras tincidunt. Cum sociis natoque penatibus et. Amet nulla facilisi morbi tempus iaculis urna id. Elementum eu facilisis sed odio. Pellentesque habitant morbi tristique senectus. Velit laoreet id donec ultrices. Tortor id aliquet lectus proin nibh nisl. Orci phasellus egestas tellus rutrum tellus. Habitant morbi tristique senectus et netus et malesuada. Consequat interdum varius sit amet mattis vulputate enim. Dolor purus non enim praesent elementum facilisis leo vel fringilla. Morbi leo urna molestie at elementum eu facilisis sed odio. Ultrices eros in cursus turpis massa tincidunt dui ut ornare. Est sit amet facilisis magna etiam.

Lacus viverra vitae congue eu consequat ac felis donec et. Pellentesque diam volutpat commodo sed. Pharetra convallis posuere morbi leo urna molestie at. Nec nam aliquam sem et tortor consequat id porta. In aliquam sem fringilla ut morbi. Mauris sit amet massa vitae. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa. Cras semper auctor neque vitae tempus quam pellentesque nec. Blandit cursus risus at ultrices mi tempus. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Non sodales neque sodales ut etiam sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Leo integer malesuada nunc vel risus commodo. Quisque sagittis purus sit amet volutpat consequat mauris nunc. Eu ultrices vitae auctor eu augue ut. Etiam erat velit scelerisque in dictum non consectetur a erat. Penatibus et magnis dis parturient montes nascetur. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Mauris commodo quis imperdiet massa. Pretium lectus quam id leo in vitae turpis massa.

Tortor consequat id porta nibh. Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Cras ornare arcu dui vivamus arcu felis bibendum ut. Enim facilisis gravida neque convallis a. Cursus in hac habitasse platea dictumst quisque sagittis. Sit amet massa vitae tortor. Viverra orci sagittis eu volutpat odio facilisis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Risus ultricies tristique nulla aliquet enim tortor at. Amet nulla facilisi morbi tempus. Bibendum enim facilisis gravida neque convallis a cras.