Blog

Creating a Custom Javascript alert Box

/ by Ava Taylor

We all know JavaScript’s default alert() box. It’s useful… but kind of boring. Rigid. Ugly. And definitely not user-friendly. So, let’s spice things up! Let’s create our own beautiful custom alert box that’s fun, flexible, and looks amazing on a webpage!

TLDR: This guide shows you how to ditch the boring JavaScript alert() and create your own custom alert box with HTML, CSS, and JavaScript. It’s simple, responsive, and much better to look at. You’ll build a reusable function that works just like the standard alert, but fancier. Let’s make alert boxes a little more exciting!

Why Build a Custom Alert Box?

The standard JavaScript alert:

alert("Hello there!");

It works. But:

  • It pauses everything.
  • It doesn’t look great.
  • You can’t style it.
  • It makes your site feel outdated.

When you make your own alert, you control how it looks and behaves. You can add images, animations, buttons, icons—anything!

What Do We Need?

To make a custom alert box, we’ll need three things:

  1. HTML — the structure of the alert box
  2. CSS — the styling to make it look nice
  3. JavaScript — to actually show the alert box and handle button clicks

Step 1: The HTML Structure

Let’s create the skeleton of our alert box. We’ll build a ‘modal’—a box that sits on top of the page.

<div id="customAlert" class="alert-box">
  <div class="alert-content">
    <p id="alertMessage">This is a custom alert!</p>
    <button onclick="closeAlert()">OK</button>
  </div>
</div>

This block of code should sit somewhere inside your HTML body. By default, we’ll make it invisible using CSS.

Step 2: Style It With Some CSS

Let’s make it look good. This CSS styles the alert box and centers it on the screen.


.alert-box {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.alert-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border-radius: 8px;
  text-align: center;
}

.alert-content p {
  font-size: 18px;
  margin-bottom: 20px;
}

.alert-content button {
  padding: 10px 20px;
  font-size: 16px;
}

Now, we’ve got a good-looking alert box. Time to fire it up with JavaScript!

Step 3: Add JavaScript Magic

Let’s make a function to trigger our alert box:


function showAlert(message) {
  document.getElementById("alertMessage").innerText = message;
  document.getElementById("customAlert").style.display = "block";
}

function closeAlert() {
  document.getElementById("customAlert").style.display = "none";
}

Now, whenever we call showAlert(“Something went wrong!”), our beautiful alert box will pop up with that message. Pretty neat!

Let’s See It In Action

Here’s a button that activates our custom alert:


<button onclick="showAlert('You clicked the button!')">
  Click me
</button>

Try adding it to your HTML. Now every time you click it, you’ll see the alert in a fun and fancy way.

Making It Even Cooler

We can improve this even more! Let’s add these features:

  • Custom Titles
  • Alert types (Success, Warning, Error)
  • Icons or even Emojis!

Update Your HTML


<div id="customAlert" class="alert-box">
  <div class="alert-content">
    <h3 id="alertTitle">Alert</h3>
    <p id="alertMessage"></p>
    <button onclick="closeAlert()">OK</button>
  </div>
</div>

Now Update JavaScript


function showAlert(message, title = "Notice", type = "info") {
  const alertBox = document.getElementById("customAlert");
  const alertTitle = document.getElementById("alertTitle");
  const alertMessage = document.getElementById("alertMessage");

  alertTitle.innerText = title;
  alertMessage.innerText = message;

  // Optional: change title color based on type
  let titleColor = "#000";
  if (type === "success") titleColor = "green";
  if (type === "error") titleColor = "red";
  if (type === "warning") titleColor = "orange";
  alertTitle.style.color = titleColor;

  alertBox.style.display = "block";
}

Try calling:


showAlert("Everything went great!", "Success", "success");
showAlert("Oh no! Something failed!", "Error", "error");
showAlert("Be careful!", "Warning", "warning");

This makes the alert box more dynamic and reusable!

Bonus: Add an Icon with Some Magic

You can make it even fancier by adding emojis or images next to your title.


<h3 id="alertTitle">⚠️ Warning</h3>

Or load in icons with Font Awesome. Just include their CSS and use:


<i class="fas fa-exclamation-circle"></i>

You can even animate your alert in with CSS transitions or fades.

When to Use Custom Alerts

Use your custom alert box whenever you want to:

  • Inform users without freezing the page.
  • Provide feedback (like form success or error).
  • Add a polished look to your web app.

Don’t use it for login popups or major decisions. Those need more security and should use modals or confirmations.

Tips to Remember

  • Keep animations simple and fast. Don’t annoy users.
  • Don’t spam users with alerts. Use them wisely.
  • Test on mobile too—make sure it looks good everywhere.
  • Always offer a close/OK button.

Final Thoughts

Creating custom alert boxes can be super fun and a big improvement for your user experience. Once you’ve built one, you’ll never want to go back to the plain old alert() again.

And the best part? You can reuse your custom alert function across many projects. Just copy-paste it and edit the styles to match your new website or app.

Remember—when it comes to web design, little details like this make a big difference.

Now go out there and alert in style!

To top