In this article, I will explain how to open a page in a Sharepoint 2010 Modal Dialog box. Something like this,
But the first Question is Why use Sharepoint 2010 modal dialog ?
Why ?
All you have to do is to call this function on the ClientClick event of your button.
But the first Question is Why use Sharepoint 2010 modal dialog ?
Why ?
- Reduces the scrolling on the page, if you have a complex custom form which requires lot of input data
- Ease to use
- Avoid Redirection of pages
- Provides details/form on a single screen
How ?
It can be used with a simple Javscript code. Below is the code snippet.
<script type="text/javascript">
function openModalURL(url, title, width,
height, callbackType, isMax) {
var
opmlPath = GetSelectedNode();
var
options = SP.UI.$create_DialogOptions();
options.url = url;
options.title = title;
options.width = width;
options.height = height;
options.showMaximized = isMax;
if
(callbackType == 'NotificationCallback') {
options.dialogReturnValueCallback
= NotificationCallback;
}
else if (callbackType == 'SilentCallback')
{
options.dialogReturnValueCallback
= SilentCallback;
}
else if (callbackType == 'RefreshCallback')
{
options.dialogReturnValueCallback
= RefreshCallback;
}
SP.UI.ModalDialog.showModalDialog(options);
}
function
NotificationCallback(dialogResult, returnValue) {
if
(dialogResult == SP.UI.DialogResult.OK) {
SP.UI.Notify.addNotification('Operation succeeded', false);
}
else if (dialogResult == SP.UI.DialogResult.cancel) {
SP.UI.Notify.addNotification('Operation cancelled', false);
}
else if (dialogResult == SP.UI.DialogResult.invalid) {
SP.UI.Notify.addNotification('Operation invalid', false);
}
}
function
SilentCallback(dialogResult, returnValue) {
}
function
RefreshCallback(dialogResult, returnValue) {
location.reload(true);
}
</script>
|
All you have to do is to call this function on the ClientClick event of your button.
Like this,
<asp:Button ID="btnOpenDialog" Text="Open Dialog" runat="server" OnClientClick="javascript:openModalURL('../Sitepages/DialogExample.aspx','Sample
Dialog', 400, 250, 'SilentCallback','false'); return false;" />
In the above example I have specified three types of Callback option on the close event of the modal dialog
- NotificationCallback - This will notify the user on the landing page using the notification on the notification bar based on the action taken by user.
- SilentCallback - This will silently close the modal Dialog box without doing anything on the parent page.
- RefreshCallback - This option will refresh the page when the Dialog box is closed.
You can explore more options for the modal dialog over here.
Now the Branding/Styling part,
Most of the styling of modal dialog are controlled by following classes. You can view it using IE Developer Toolbar
I have modified the basic styling to make it suitable to stylesheet of my site.
<style type="text/css">
.ms-dlgOverlay
{
background-color:
#676767;
}
.ms-dlgContent
{
border:
0;
}
.ms-dlgBorder
{
border:
1px solid #0087C1;
}
.ms-dlgTitle
{
background-color:
#0087C1;
}
.ms-dlgTitleText
{
display:
block;
font-weight:
bold;
font-size:
13px;
padding:
7px;
}
</style>
|
I Hope this article was informative. Happy Sharepointing !
Please do Share/Like/Comment if this article was helpful.
Please do Share/Like/Comment if this article was helpful.
