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

June 30, 2022 ≈ 1 minute 51 seconds

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



#html

Subscribe to our newsletter

If you provide url of your website, we send you free design concept of one element (by our choice)

Subscribing to our newsletter, you comply with subscription terms and Privacy Policy