A message box is a perfect solution to notify the users about the process that’s going to happen on a webpage. Basically, a Website may show various types of messages to the users. However, a message that display on a button click in HTML likely be an alert or notification about the process that they are going to perform.
This tutorial is focused on a message box that we are going to build using HTML, CSS, and a little bit of JavaScript function. The main requirement of this project is that when a user clicks on the button, a closable message popup box will display. Surprisingly, you can also create a pure CSS popup box on click but this idea is quite tricky while executing callback functions.
Anyhow, with the help of this tutorial, you will be able to execute your custom functions along with this message popup box. So, let’s get started with HTML coding to display a message box on a button click.
HTML Structure to Display Message Box
First of all, create a button element that will be used to reveal the message box. You can also create a div element virtual button to display a message box in HTML.
After that, create HTML for message box and background dim overlay as follows:
Have a nice day!
This is message box popup that revealed on button click.
You can place any HTML element (e.g images, videos, text, and links ) inside the "pop-up-content-wrap" tag.
The CSS Styles
In CSS, define the CSS styles for your button element that’s will be used to trigger the message. Generally, the design of this button is optional. Anyway, you can also browse some cool CSS buttons to pick a different design.
Now, desfine styles for the main wrapper of the message box. Keep its o overflow hidden and set a fixed position. We need to hide it by default by defining opacity value as 0. Likewise, define CSS transition for smoothness of the opacity in order to make a fading effect.
We need a special class that we’ll add to modal using the jQuery click function to show the pop-up. In this class, keep the opacity value 1 and z-index greater than other elements.
Define the CSS styles for the message box as described below:
Load the jQuery JavaScript library and create a click function to activate the message box.
You have completed it! If you have any questions or suggestions related to this message box project, let me know by comment below.
Muhammad Asif
Muhammad Asif is a Front End Developer and Editor Staff at Codeconvey.com. He enjoys experimenting with new CSS features and helping others learn about them.
28 Best CSS Alerts For Your Website [Code Examples]
Believe it or not, it’s possible to create pure CSS alerts. So, if you want a simple and elegant solution, there are a few alert modals that you can use.
In this article, we’ll be providing some beautiful CSS alerts and some CSS styles that you can copy to create a beautiful alert, and perhaps animate it with JavaScript or just render it on the server after form submission or similar.
What Are CSS Alerts?
CSS alerts are a kind of text message that provides the visitor with certain information. They can appear as overlay notifications, dialog modals, inline, etc. CSS alerts are classified into 4 main categories:
Danger/Error (Red)
Warning (Yellow/orange)
Information (Blue)
Success (Green)
Best 28 CSS Alerts
Whether you are looking for CSS-only alerts, JavaScript-animated ones, or just some beautiful styles, check our list below:
1. Closable Pure CSS Alerts
These light-themed alerts are using only CSS.
If you pay attention, you’ll notice how they can be closed when clicking over them or on the «x» icon.
This kind of alert can come in handy when rendered server-side. For example, when submitting a form via PHP or node.
2. Beautiful & Basic CSS Only Alert
Here’s a gorgeous alert built with CSS and no javascript at all.
The examples display a basic modal once the «button» is focused.
It uses the :target pseudoelement to toggle the visibility of the popup with the alert.
3. Modal Alert Overlay In Pure CSS
This alert makes use of CSS to conditionally display a modal dialog message.
It makes use of a checkbox input and the :checked CSS property to determine when to show/hide the alert.
It’s a technique used for many CSS elements with 2 states, such as hamburger menus or CSS toggles switches.
4. Material Design Multi-color CSS Alerts
This is a great example of some beautiful and modern alert notifications.
They make use of strong and vivid colors in combination with Material Design Icons to create such a beautiful design.
5. Basic Pure CSS Alerts
If you are looking for simplicity, then these alerts are for you.
They don’t make use of any external vendor. No framework, no JS, and no icons.
Just some plain CSS to give some basic style to your alert messages.
6. Light Alerts In Pure CSS
If you are looking for some pretty alerts for your light-themed page, these are definitely for you!
I especially like the error and the success alert.
They use a minimal approach to create some beautiful styles for your alert components.
They won’t even use icons but it won’t prevent them from serving their purpose perfectly.
7. Tailwind CSS Alerts
If you use TailwindCSS as your CSS framework, then you want to make use of it to also display alerts.
This example shows how to display multiple alerts at the bottom of the page.
These alerts come with multiple colors and icons depending on the kind of alert it is: Error, success, info, or warning alert.
8. Modal Dialog Alert Message With CSS
Another CSS only solution to create a stylish alert modal.
The modals show a box with some content and a closing button.
To close the modal you can click on the dark overlay or the closing button.
This example uses the same technique as other two-state components. It uses a checkbox to track the state with CSS.
9. Timed Vanilla JS and CSS Alert
A truly modern alert that displays a notification on the top right corner of the page.
The alert times out and displays an animated progress bar to show the remaining time.
The design looks super modern and, best of all, it doesn’t use any external components! Pure CSS and Vanilla JS make the magic.
10. Multiple Simple CSS Only Modals
These alert modal dialogs make intelligent use of the :target pseudoelement to control the status of the modal.
The alerts get displayed when clicking (and focusing) the texts.
11. Large CSS Alert Notification
These alerts are a bit more original than others.
If you are looking for a big notification with some personality, these might be for you.
They don’t use any external vendor library and make use of SVG icons.
jQuery is fully optional. It only adds the closing feature, but that can be replaced if necessary for plain JS or even pure CSS.
12. Timed jQuery Text Alerts
If you are ok with using a bit of JS (or jQuery), these are some beautiful alerts.
Unlike others, these alerts get stacked underneath each other at the very top of the page.
I personally think it looks great and I like it more than the side notifications, especially for important messages or errors.
There’s a bit of jQuery involved, but you can easily turn it into Vanilla JS.
13. Colored CSS Only Alerts with TailwindCSS
For those who are into flat design and make use of TailwindCSS, these alerts can be for you.
I personally like the selection of colors, the modern feel, and the simplicity of their design.
14. Gaming CSS Closable Alert
For a less serious look and feel this alert is a great candidate.
It’s big, it’s very original and it’s done entirely with CSS.
15. Bottom Right Tailwind + Alpine Alerts
For those who like using the latest trends and make use of TailwindCSS and Alpine.js.
Simple use of alert notifications that get displayed on the bottom right.
Each type of alert has its icon and they replace each other when clicked continuously.
16. Bootstrap 5 Alert Message
Example of a simple alert using Bootstrap 5.
The alert message accepts a title and a body, so it comes in handy for that kind of alert that requires a bit more context.
17. Bootstrap 4 Alerts (CSS Only)
A great solution for developers using Bootstrap 4.
In this case, there’s no JavaScript involved and the alerts only get animated on page load.
This can come in handy when displaying them server-side after form submission, for example.
18. Alerts With Icons & Text Messages
A very simple implementation of an alert component.
They are made with CSS and the only external component they use is FontAwesome for the icons.
They use a white background for the alert message and add a touch of color on the icon background to define the type of alert it is.
19. Foundation Framework Alert Message
If you are working with the Foundation framework, then you might want to consider these alerts.
They time out after some time and can get stacked on top of each other when triggered continuously.
They enter from the bottom right with fast slide animation.
20. Bootstrap 3.3 Alerts
For those who are still using Bootstrap 3.
These alerts will stack on top of each other with a small and cute animation.
21. Colored Gradient Tailwind CSS Alert
A lovely collection of CSS alert examples.
They use Tailwind CSS framework and some beautiful and subtle gradients and shadows.
Whether you use Tailwind CSS or not, you can take the alert styles and apply them to any other alert to step up their design.
22. Basic Alert on Vanilla JS & CSS
Simple alert with no frameworks and vanilla JS.
Nothing too fancy about it, but gets the job done with practically just CSS.
23. Status Alerts
Example of some status alerts that you can use on your website.
They use a bit of JavaScript and FontAwesome for the icons.
24. Scale Effect Alert
This alert component makes use of an elastic zoom effect to display the notification.
The notification alert will timeout after some time.
It also uses a progress indicator to show when the alert will disappear.
25. Large Modern CSS Alert Components
Use this CSS code to create some modern alert messages.
It uses FontAwesome to display icons for each kind of alert message.
26. Information CSS Only Alert
Information kind of alert.
It gets closed when clicking on the X and uses an SVG image for the information icon.
27. Warning CSS Alert Message
It gets closed when clicking on the X and uses an SVG image for the warning icon.
28. Model Alert Via :target In CSS
A very basic modal alert built entirely on CSS.
The dialog uses the bare minimum style but it still looks modern and totally usable.
The modal comes with a heading and text content and its wrapper uses some box shadow.
It uses a dark overlay when opened that closes the modal when it gets clicked.
How do I show an alert in HTML?
HTML doesn’t provide a way to show alerts. But you can make use of the alert function in JavaScript to do so.
For more information on alerts, check how to use JavaScript alerts.
