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.
Nice Article. Is there any option to change the close image?
ReplyDelete@Neha- Acctualy there is a way..But a not so easy as if you see in IE Development toolbar, the image path for the close button is not embedded in the style it is difficult to override in the CSS. But a quick way is to modify the DP.UI.Dialog.js file. All you have to do is to replace the code src=\"/_layouts/images/fgimg.png\" in the file with your custom image.
ReplyDelete