Alright, let me tell you about this thing I built the other day, this ‘motal’. Needed a pop-up, you know? Something to stop people from accidentally clicking delete on stuff in this little tool I was making.
Didn’t want those ugly browser `alert()` boxes. Looks cheap. So I decided to build my own. A proper overlay thing.
Getting Started
First, I just chucked some basic HTML onto the page. Needed two main parts:
- A big div to act as the background shadow. Gotta cover the whole screen, make it kinda dark so the box pops.
- Another div nested inside, that’s the actual motal box. Threw in a header, the question text, and a couple of buttons – ‘Yep’ and ‘Nope’.
Making It Look Less Awful
Then came the CSS part. Gotta make it look like something, right? Not just random text floating around.
The background div got position: fixed, width: 100%, height: 100%, a dark background-color with some transparency, and a high z-index. Basic stuff to make it sit on top of everything else.
Centering the damn motal box is always a pain. Used position: fixed again, then top: 50%, left: 50%, and that transform: translate(-50%, -50%) trick. Works most of the time. Gave the box itself a white background, some padding so the text isn’t jammed against the edges.
Initially, I set both the overlay and the box to display: none. Hide ’em until needed.
Making It Work
Now for the JavaScript. Had to make this thing actually appear and disappear.
Grabbed the delete button on the page. Added a click listener to it. When someone clicks delete, instead of deleting right away, the JavaScript function runs.
Inside that function, I just find my overlay div and my motal box div and change their display style from none to block (or flex, whatever works). Boom, motal appears.
Then, the buttons inside the motal needed wiring up. The ‘Nope’ button? Easy. Click it, run some JavaScript to set the display back to none for the overlay and box. Back to hidden.
The ‘Yep’ button? Similar. Click it, first run the actual delete code I needed, then hide the motal by setting display back to none.
End Result
And that was pretty much it. Took maybe an hour of messing about. Got a working motal. It’s not fancy, doesn’t have slick animations or anything, but it does the job. Stops accidental deletes. Sometimes you don’t need a massive framework or library, just gotta get your hands dirty with the basics. HTML, CSS, JavaScript. Done.
