Search
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
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...
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...