How to enable Users to Close Status Messages and Notifications

In SharePoint you can give feedback to your users through status messages and notifications. The notifications can disappear automatically (if you call the addNotification method with false as the second parameter), and we can hide status messages as well from code using JavaScript setTimeout method (see examples here). Assuming that your scripts are running in the background and can give feedback not only as a direct response to a user action, it is not ideal, if your messages disappear after a few seconds, as the user may omit them easily. On the other side, it would not be nice, if the messages flooded the UI, without the possibility the user can close them after reading, similarly to the OK button in a JavaScript alert.

Fortunately, it’s quite easy to inject this feature using jQuery. For example, we can insert an x into the status message using the code below. The message disappears as the user clicks on the x:

var statusId = SP.UI.Status.addStatus("Status message:", "This is a test message");
makeStatusClosable(statusId);

function makeStatusClosable(statusId) {
    var status = $(‘#’ + statusId);
    $(status).html(‘<a title="Close status message" href="" onclick="javascript:SP.UI.Status.removeStatus(\” + statusId + ‘\’);javascript:return false;">x</a>&nbsp;’ + $(status).html());
}

The result is illustrated on the following screenshot:

The same solution for the notifications looks like this:

var notificationId = SP.UI.Notify.addNotification("This is a test message", true);
makeNotificationClosable(notificationId);

function makeNotificationClosable(notificationId) {
    var notification = $(‘#’ + notificationId).find(‘.s4-noti-in3′);
    $(notification).html(‘<a title="Close notification" href="" onclick="javascript:SP.UI.Notify.removeNotification(\” + notificationId + ‘\’);javascript:return false;">x</a>&nbsp;’ + $(notification).html());
}

And the outcome is: