Search
The Different (and Modern) Ways to Toggle Content
8.11.2024
Let’s spend some time looking at disclosures, the Dialog API, the Popover API, and more. We’ll look at the right time to use each one depending on your needs. Modal or non-modal? JavaScript or pure HTML/CSS? Not sure? Don’t worry, we’ll go into all that.
The Different (and Modern) Ways...
Clarifying the Relationship Between Popovers and Dialogs
23.10.2024
The difference between Popovers (i.e., the popover attribute) and Dialogs (i.e., both the <dialog element and the dialog accessible role) is incredibly confusing — so much that many articles (like this, this, and this) have tried to …
Clarifying the Relationship Between Popovers...
HTML popover Attribute
15.4.2024
Modals have been an important part of websites for two decades. Stacking contents and using fetch to accomplish tasks are a great way to improve UX on both desktop and mobile. Unfortunately most developers don’t know that the HTML and JavaScript specs have implemented a native modal system...
Collective #728
8.9.2022
Is it :modal? * Critical CSS? Not So Fast! * Stable Diffusion * JSON Crack
Dialog Components: Go Native HTML or Roll Your Own?
23.5.2022
As the author of a library called AgnosticUI, I’m always on the lookout for new components. And recently, I decided to dig in and start work on a new dialog (aka modal) component. That’s something many devs like to …
Dialog Components: Go Native HTML or Roll Your Own? originally published...
Replace JavaScript Dialogs With the New HTML Dialog Element
8.2.2022
You know how there are JavaScript dialogs for alerting, confirming, and prompting user actions? Say you want to replace JavaScript dialogs with the new HTML dialog element.
Let me explain.
I recently worked on a project with a lot of …
Replace JavaScript Dialogs With the New HTML Dialog...
How to Implement and Style the Dialog Element
27.10.2021
A look from Christian Kozalla on the <dialog> HTML element and using it to create a nice-looking and accessible modal.
CodePen Embed Fallback
I’m attracted to the <dialog> element as it’s one of those “you get a lot for free” …
The post How...
How to Implement and Style the Dialog Element
6.10.2021
Go in-depth on the native dialog HTML element with this tutorial and learn how to implement a user-friendly, accessible dialog on your website.
The post How to Implement and Style the Dialog Element appeared first on Codrops
Using Markdown and Localization in the WordPress Block Editor
23.9.2020
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Since the block editor is based on React, we may be tempted to use React components and HTML code for the documentation. That is the approach I followed in my previous article, which...
Creating a Modal Image Gallery With Bootstrap Components
6.3.2020
Have you ever clicked on an image on a webpage that opens up a larger version of the image with navigation to view other photos?
Some folks call it a pop-up. Others call it a lightbox. Bootstrap calls it a modal. I mention Bootstrap because I want to use it to make the same sort of thing. So, let’s...
Comparing the Different Types of Native JavaScript Popups
31.10.2019
JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:
alert("Hello, World!");
The UI for this varies from browser to browser, but generally you’ll see a little window pop up front and center in a very show-stopping way that contains the message...
Weekly Platform News: WebAPK Limited to Chrome, Discernible Focus Rectangles, Modal Window API
25.10.2019
In this week's roundup: "Add to home screen" has different meanings in Android, Chrome and Edge add some pop to focus rectangles on form inputs, and how third-party sites may be coming to a modal near you.
Let's get into the news.
WebAPKs are not available to Firefox on Android
On Android, both...
Game of Thrones Quiz Game with React and GraphQL: Creating the Question Modal
17.6.2019
Create a folder named question-modal within the src/components directory and a file index.js within it. Open the file and update it with the snippet below:
Movin’ Modals Along a Path
4.6.2019
Modals always be just appearin'. You might see one once in a while that slides in from one of the edges, or uses some kind of scale/opacity thing to appear from "above" or "below." But we can get weirder than that. Why not have them come in on an offset-path?
Just a swoopy arc is kinda fun.
...
Prevent Page Scrolling When a Modal is Open
3.6.2019
Please stop me if you've heard this one before. You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal.
That's because modals are elements on a page just like any other. It may stay in place (assuming that's what it's meant...
Encapsulating Style and Structure with Shadow DOM
21.3.2019
This is part four of a five-part series discussing the Web Components specifications. In part one, we took a 10,000-foot view of the specifications and what they do. In part two, we set out to build a custom modal dialog and created the HTML template for what would evolve into our very own custom...
Crafting Reusable HTML Templates
19.3.2019
In our last article, we discussed the Web Components specifications (custom elements, shadow DOM, and HTML templates) at a high-level. In this article, and the three to follow, we will put these technologies to the test and examine them in greater detail and see how we can use them in production...
Understanding React `setState`
25.4.2018
React components can, and often do, have state. State can be anything, but think of things like whether a user is logged in or not and displaying the correct username based on which account is active. Or an array of blog posts. Or if a modal is open or not and which tab within it is active.
React...