CSS-only Toast
Here's a way to create a create a toast UI that toggles visible with CSS only.
This has come in handy for me in a form submission scenario. After submission, I want to show a "thank you" message.
First, style the toast however you prefer. Then, importantly, hide it:
.toast {
/* ... */
display: none;
}
Also include the selector for :target
, which will select on an element with that id, when that id matches the hash in the URL:
.toast:target {
display: block;
}
Then set up the markup, including the class
and the id
:
<div class="toast" id="toastme">This is the toast message</div>
Now, if you went to the url /#toastme
, the toast would display. If the url is otherwise, it will be hidden.
Again, in the "thank you" scenario, this might come after a form submission, like this:
<form action="#toastme">
<button>Submit</button>
</form>