Alert boxes with a close button you can copy and paste into your HTML code—inline styles and no javascript

A lot of times, while working on a project without CSS frameworks, I found myself googling for alert boxes, which I can copy and paste without any setup. Every time I paste the code it requires some additional adjustments. So I made inline Error, Success, Info, and Warning forms with a close button and zero javascript. I use it myself and now share with you.

❗️Based on modern <dialog> element. Check for browser support before using it in production.

Error

You Have No Power Here!

×

<dialog open style="width: 100%; border-radius: .5rem; padding: 1.5rem 1rem; position: relative; border: 1px solid #f57c7c; background-color: #fff2f2; box-sizing: border-box">
    <form method="dialog"
          style="display: flex; justify-content: space-between; color: #e04e4e;"
    >
        <p style="font-family: Arial, sans-serif; line-height: 1rem; margin: 0">You Have No Power Here!</p>
        <button style="border: 0; margin: 0; font-size: 1.5rem; line-height: 1rem; background: none; color: inherit; font-weight: bold; cursor: pointer">×</button>
    </form>
</dialog>

Success

All’s well that ends better.

×

<dialog open style="width: 100%; border-radius: .5rem; padding: 1.5rem 1rem; position: relative; border: 1px solid #3dafaa; background-color: #dff8f3; box-sizing: border-box">
    <form method="dialog"
          style="display: flex; justify-content: space-between; color: #36676c;"
    >
        <p style="font-family: Arial, sans-serif; line-height: 1rem; margin: 0">All’s well that ends better.</p>
        <button style="border: 0; margin: 0; font-size: 1.5rem; line-height: 1rem; background: none; color: inherit; font-weight: bold; cursor: pointer">×</button>
    </form>
</dialog>

Info

Not all those who wander are lost.

×

<dialog open style="width: 100%; border-radius: .5rem; padding: 1.5rem 1rem; position: relative; border: 1px solid #4595d7; background-color: #ebf5fc; box-sizing: border-box">
    <form method="dialog"
          style="display: flex; justify-content: space-between; color: #326ba8"
    >
        <p style="font-family: Arial, sans-serif; line-height: 1rem; margin: 0">Not all those who wander are lost.</p>
        <button style="border: 0; margin: 0; font-size: 1.5rem; line-height: 1rem; background: none; color: inherit; font-weight: bold; cursor: pointer">×</button>
    </form>
</dialog>

Warning

The Ring has awoken, it’s heard its master’s call.

×

<dialog open style="width: 100%; border-radius: .5rem; padding: 1.5rem 1rem; position: relative; border: 1px solid #f1984f; background-color: #fffaf3; box-sizing: border-box">
    <form method="dialog"
          style="display: flex; justify-content: space-between; color: #c76636"
    >
        <p style="font-family: Arial, sans-serif; line-height: 1rem; margin: 0">The Ring has awoken, it’s heard its master’s call.</p>
        <button style="border: 0; margin: 0; font-size: 1.5rem; line-height: 1rem; background: none; color: inherit; font-weight: bold; cursor: pointer">×</button>
    </form>
</dialog>

🚀 I do hope you enjoy this code as much as I enjoyed writing it!

Browser support