Tools Contact Us

HTML Native DIALOG Element

This example shows how to use the native HTML Dialog which includes a backdrop. It uses a bit of Javascript to open the dialog (in the button in this example) and a bit in the close buttons within the dialog HTML to close it.

For more info:  https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element





Dialog 1

This is a medium sized dialog. The dialog will
automatically expand horizontally and vertically to
accomodate the content.

Dialog 2 - Wide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae feugiat est. Phasellus vehicula luctus urna id iaculis. Morbi euismod aliquam pretium. Duis eu dictum justo. Nullam sed turpis quam. Etiam eget ante sit amet nibh feugiat mollis. Fusce mattis nisl aliquam, dignissim ipsum ut, maximus eros. In hac habitasse platea dictumst. Sed at lectus ut lorem imperdiet imperdiet sit amet sit amet quam. Sed sodales mattis nulla, sit amet auctor orci semper at. Nullam bibendum porttitor metus, sed pulvinar orci pellentesque id. Sed viverra, purus ut hendrerit rhoncus, orci justo finibus nisl, eu fermentum lorem elit vitae leo. Aliquam ultrices iaculis diam.

Dialog 3 - Wide and Tall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae feugiat est. Phasellus vehicula luctus urna id iaculis. Morbi euismod aliquam pretium. Duis eu dictum justo. Nullam sed turpis quam. Etiam eget ante sit amet nibh feugiat mollis. Fusce mattis nisl aliquam, dignissim ipsum ut, maximus eros. In hac habitasse platea dictumst. Sed at lectus ut lorem imperdiet imperdiet sit amet sit amet quam. Sed sodales mattis nulla, sit amet auctor orci semper at. Nullam bibendum porttitor metus, sed pulvinar orci pellentesque id. Sed viverra, purus ut hendrerit rhoncus, orci justo finibus nisl, eu fermentum lorem elit vitae leo. Aliquam ultrices iaculis diam.

Sed cursus consectetur urna sed elementum. Suspendisse est ex, elementum eget interdum at, convallis sed ipsum. Morbi venenatis libero vel nulla dignissim elementum. Praesent ut dui felis. Morbi quis ligula pretium, consequat diam non, luctus metus. Proin laoreet viverra urna, id ullamcorper magna convallis sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer faucibus auctor efficitur. Integer arcu diam, tempor sit amet dignissim a, mattis eget dui. Fusce vel turpis quis nibh iaculis tempus ac non ipsum. Integer placerat luctus orci, in imperdiet risus vehicula sit amet. Aliquam porta enim eget ex consequat pulvinar. Donec vel nibh vestibulum, consectetur felis in, ornare ipsum. Phasellus sit amet ultricies urna, vel dapibus ante. Pellentesque euismod elementum magna, id ultricies turpis ornare ut. Aenean at mauris ipsum.

Nunc eget ligula vitae odio facilisis porttitor. Pellentesque velit ipsum, pellentesque a magna gravida, vestibulum interdum elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum pulvinar ullamcorper ante, eu cursus erat mollis eget. Duis non turpis mollis urna vehicula tincidunt nec et ex. Fusce porttitor arcu nulla, non fringilla odio auctor quis. Fusce at scelerisque elit, lobortis efficitur diam. Duis sem nisl, tempus nec dolor et, hendrerit congue nibh.

Pellentesque augue nibh, lobortis bibendum leo at, porta tristique metus. Donec pellentesque semper lorem, ut tristique ex cursus in. Etiam rhoncus aliquet sapien, tincidunt vestibulum risus suscipit sed. Ut ut erat et sapien hendrerit bibendum. Aenean at turpis ac nisl porttitor tincidunt. Suspendisse dictum est quis lectus dapibus tempus. Quisque dignissim varius ultricies. Cras tempor eget leo a tempus. Quisque aliquet lorem ac leo accumsan commodo. Aliquam ut sem pharetra, porttitor ex id, ultricies sem. Mauris nisl diam, auctor id maximus eget, vestibulum a justo. Maecenas id maximus risus.

Aenean et turpis ac nisi accumsan pretium. Praesent facilisis mi vitae eros tempor, at egestas sem maximus. Suspendisse fringilla ullamcorper pellentesque. Morbi sed mauris maximus, pretium sem eu, viverra sem. Aliquam vel finibus dolor. Maecenas ornare libero non libero dictum fringilla. Fusce ipsum nunc, egestas suscipit nisi non, fringilla gravida massa. Donec pharetra massa ante, dignissim gravida ex convallis vitae. Maecenas bibendum luctus sapien vitae accumsan. Fusce imperdiet enim vel urna egestas mattis sit amet id arcu. Cras vel ligula gravida, luctus elit nec, lobortis ex. Nullam luctus turpis eget turpis finibus luctus. Quisque semper libero nisi, eu malesuada lectus gravida pharetra. Suspendisse urna massa, sagittis ac euismod ut, bibendum id felis. Nulla posuere pharetra tortor, id iaculis nisl scelerisque ac. Sed eu volutpat enim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae feugiat est. Phasellus vehicula luctus urna id iaculis. Morbi euismod aliquam pretium. Duis eu dictum justo. Nullam sed turpis quam. Etiam eget ante sit amet nibh feugiat mollis. Fusce mattis nisl aliquam, dignissim ipsum ut, maximus eros. In hac habitasse platea dictumst. Sed at lectus ut lorem imperdiet imperdiet sit amet sit amet quam. Sed sodales mattis nulla, sit amet auctor orci semper at. Nullam bibendum porttitor metus, sed pulvinar orci pellentesque id. Sed viverra, purus ut hendrerit rhoncus, orci justo finibus nisl, eu fermentum lorem elit vitae leo. Aliquam ultrices iaculis diam.

Sed cursus consectetur urna sed elementum. Suspendisse est ex, elementum eget interdum at, convallis sed ipsum. Morbi venenatis libero vel nulla dignissim elementum. Praesent ut dui felis. Morbi quis ligula pretium, consequat diam non, luctus metus. Proin laoreet viverra urna, id ullamcorper magna convallis sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer faucibus auctor efficitur. Integer arcu diam, tempor sit amet dignissim a, mattis eget dui. Fusce vel turpis quis nibh iaculis tempus ac non ipsum. Integer placerat luctus orci, in imperdiet risus vehicula sit amet. Aliquam porta enim eget ex consequat pulvinar. Donec vel nibh vestibulum, consectetur felis in, ornare ipsum. Phasellus sit amet ultricies urna, vel dapibus ante. Pellentesque euismod elementum magna, id ultricies turpis ornare ut. Aenean at mauris ipsum.

Nunc eget ligula vitae odio facilisis porttitor. Pellentesque velit ipsum, pellentesque a magna gravida, vestibulum interdum elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum pulvinar ullamcorper ante, eu cursus erat mollis eget. Duis non turpis mollis urna vehicula tincidunt nec et ex. Fusce porttitor arcu nulla, non fringilla odio auctor quis. Fusce at scelerisque elit, lobortis efficitur diam. Duis sem nisl, tempus nec dolor et, hendrerit congue nibh.

Pellentesque augue nibh, lobortis bibendum leo at, porta tristique metus. Donec pellentesque semper lorem, ut tristique ex cursus in. Etiam rhoncus aliquet sapien, tincidunt vestibulum risus suscipit sed. Ut ut erat et sapien hendrerit bibendum. Aenean at turpis ac nisl porttitor tincidunt. Suspendisse dictum est quis lectus dapibus tempus. Quisque dignissim varius ultricies. Cras tempor eget leo a tempus. Quisque aliquet lorem ac leo accumsan commodo. Aliquam ut sem pharetra, porttitor ex id, ultricies sem. Mauris nisl diam, auctor id maximus eget, vestibulum a justo. Maecenas id maximus risus.

Aenean et turpis ac nisi accumsan pretium. Praesent facilisis mi vitae eros tempor, at egestas sem maximus. Suspendisse fringilla ullamcorper pellentesque. Morbi sed mauris maximus, pretium sem eu, viverra sem. Aliquam vel finibus dolor. Maecenas ornare libero non libero dictum fringilla. Fusce ipsum nunc, egestas suscipit nisi non, fringilla gravida massa. Donec pharetra massa ante, dignissim gravida ex convallis vitae. Maecenas bibendum luctus sapien vitae accumsan. Fusce imperdiet enim vel urna egestas mattis sit amet id arcu. Cras vel ligula gravida, luctus elit nec, lobortis ex. Nullam luctus turpis eget turpis finibus luctus. Quisque semper libero nisi, eu malesuada lectus gravida pharetra. Suspendisse urna massa, sagittis ac euismod ut, bibendum id felis. Nulla posuere pharetra tortor, id iaculis nisl scelerisque ac. Sed eu volutpat enim.


Code (minimum required)