Display Status Notification Toast in a SharePoint Modal Dialog


When developing a site or application page in SharePoint the ribbon control will typically be excluded from the modal display since it is outside of the modal dialogs rendered output (see SharePoint CSS class s4-notdlg).

In most cases this is just fine, except that, if you want to display SharePoint notification toast’s you won’t see them, since the notification area DIV lives inside of the ribbon control, as the image below shows;

notificationArea
notificationArea

However, with a little jQuery, you can display notification’s inside your modal dialog.

First, somewhere in your site or application page markup create a DIV which will become the notification area’s new container;

new notification area container
new notification area container

The only important thing about this DIV is that it should have absolute positioning.

Next add the following piece of jQuery to move the existing notificationArea DIV to it’s new home;

&lt;script type='text/javascript'&gt;<br />	$(function() {<br />			$("#notificationArea")<br />				.appendTo("#newNotificationArea")<br />				.css("right", "20px");<br />	});<br />&lt;/script&gt;

Here we move the existing notificationArea DIV to be a child element of our new container DIV (newNotificationArea). I also adjust the notificationArea‘s right CSS property, to position it correctly within my application page.

Published by

Phil Harding

SharePoint Consultant, Developer, Father, Husband and Climber.

One thought on “Display Status Notification Toast in a SharePoint Modal Dialog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s