Message Boxes with jQuery
Message boxes communicate status such as loading, success, warning and error. Keep them close to the action they describe, update them as plain text, and let users dismiss important persistent messages.
Show a Status Message Top ↑
function showMessage(
text,
type = "info"
) {
const classes =
"alert-info alert-success " +
"alert-warning alert-danger";
$( "#message-demo" )
.removeClass( classes )
.addClass(
"alert-" + type
)
.show();
$( "#message-text" ).text( text );
}
Hide after a Delay Top ↑
const timer = setTimeout(
function () {
$( "#message-demo" ).fadeOut(
"slow"
);
},
4000
);
Add a Close Control Top ↑
$( "#message-close" ).on(
"click",
function () {
$( "#message-demo" ).hide();
}
);
Tooltip-Style Validation Messages Top ↑
Custom tooltips can point to invalid fields, but for new interfaces also consider native validation messages, Bootstrap validation feedback, or jQuery UI Tooltip.
Original horizontal tooltip demo →
Original vertical tooltip demo →
Original fixed message-box demo →
Additional Original Learning Routes Top ↑
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
