Modal Dialogs in SharePoint 2010 use the client library SP.UI.ModalDialog and ShowPopupDialog. We can open Dialog without leaving the page by writing simple html markup and by calling some SP.UI.ModalDialog API’s.
Most simplest and an easy way to create SharePoint Modal Dialog is, calling JavaScript function and pass only URL parameter.
<a href=”javascript:SP.UI.ModalDialog.ShowPopupDialog(‘/_layouts/viewlsts.aspx?isDlg=1’);” >
View All Contents
</a>
isDlg=1 Optional
You can simply add “&IsDlg=1″ to any SharePoint URL and the chrome will be turned off.
There are some parameters specially setting the width and the height of the window and a null parameter for call back function. which for now is set to null. We can create Dialog with specified hight and width like,
<a href=”javascript:SP.UI.ModalDialog.ShowPopupDialog(‘/_layouts/viewlsts.aspx?isDlg=1’, null, 500, 300);” >
View All Contents
</a>
If we want to open Dialog and on closing of it’s a message will be display for the task completion etc. Now we are using SP.UI.Notify.addNotification API’s for message or notification display on screen.
<script type=”text/javascript” >
function Callback(result, target) {
if (result == SP.UI.DialogResult.cancel) {
SP.UI.Notify.addNotification(“Operation was cancelled…”, false, “”, null);
}
else {
SP.UI.Notify.addNotification(“Operation was cancelled…”, false, “”, null);
//window.location.reload();
}
}
</script >
<a href=”javascript:SP.UI.ModalDialog.OpenPopUpPage(‘/_layouts/viewlsts.aspx’, Callback, 500, 300);“>
View All Contents
</a >
We can write our custom javascript and call SP.UI.ModalDialog function with Dialog setting with different options. Complete list of options can be found here
<script type=”text/javascript”>
function OpenDialog(URL) {
var options = SP.UI.$create_DialogOptions();
options.url = URL;
options.width = 600;
options.height = 400;
SP.UI.ModalDialog.showModalDialog(options);
}
</script>
<a href=”javascript:OpenDialog(‘/_layouts/viewlsts.aspx’)”>Link</a>
Saifal Maluk 