![]() They are bundled snippets of HTML, CSS, and JavaScript that encapsulate scope. Now that we have covered the “why” of scratching this particular itch, throughout the rest of this article I will explain the “how” of building it.įirst, a quick crash course on Web Components. If you are tight on time and just want to see the finished product, check it out here: ( Large preview) CTA Modal - scrollable content. Note: In order to benefit from this article and code examples you will need some basic familiarity with HTML, CSS, and JavaScript. It is indeed possible to build a modal with rich interaction that only requires authoring HTML to use. Write once and run everywhere, so to speak, or at least that was my lofty aspiration. I thought to myself: “What if it were possible to build a modal that, as a developer authoring a page or app, I would not have to fuss with any additional JavaScript config?” Now that Web Components are widely supported by every major browser (RIP, IE11), this opens up a whole new door of opportunity. When I started to get more into Web Components, I had an “a-ha!” moment. I am the type of person who likes to “go deep” on topics that vex me - especially if I find the topic resurfacing - hopefully in an effort to avoid revisiting them ever again. Not only from a visual standpoint but there are plenty of tricky user interactions that need to be accounted for as well. If you have ever struggled to build a modal, then you will know what I mean when I say: It is easy to get them wrong. I have built bespoke implementations using vanilla JavaScript, jQuery, and more recently - React. Throughout my career, I have written my fair share of modals. When used tastefully and wisely, I dare say they can even help add more context to a document or to an app. They are a user interface paradigm that we cannot simply disinvent. That said, modals are everywhere among us. Try and remember why I came here in the first place- Andy Budd January 2, 2022 Close the “subscribe to our newsletter” pop-upĥ. Close the support widget asking if I need helpĤ. Figure out how to decline all but essential cookiesĢ. “Hate” would be too strong a word to use, but let’s say that nothing is more of a turnoff when starting to read an article than being “slapped in the face” with a modal window before I have even begun to comprehend what I am looking at.ġ. I have a confession to make - I am not overly fond of modal dialogs (or just “modals” for short). They are based on Web Components that are currently supported by every major browser. In this article, Nathan Smith explains how to create modal dialog windows with rich interaction that will only require authoring HTML in order to be used. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |