SharePoint 2010 Modal Dialog Tweet
 
Modal dialog play very important role to improve the user experience by reducing the number of postbacks. So, SharePoint 2010 comes up with in-build API to show modal dialog to improve the user experience. Here, I will explain you How to integrate SharePoint 2010 modal dialog with the application and some real time problems and their solutions. Before I go on and provide you with the details, Let us see some of the features that this new Modal Dialog provides.

Functionality provided by Modal Dialog: -
       - Display HTML content  in Modal Dialog
       - Display external url (e.g. http://www.google.com) or any application page of SharePoint in the form of an iframe
       - Show/Hide Close button
       - Show/Hide Maximize button

Mentioned below are the steps to integrate a modal dialog in the SharePoint 2010:

  1. The JavaScript files for the ECMAScript Object Model (SP.js, SP.Core.js, SP.Ribbon.js, and SP.Runtime.js ) are installed in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS directory. We need to add these JavaScript files in the page.
  2. To open a dialog we need to use the 'SP.UI.ModalDialog.showModalDialog' method from the ECMAScript Client Object model and we can pass following parameters as per requirement:

- width: Set the width of the modal dialog

- height: Set the height of the modal dialog

- html: the ID HTML control or HTML content to be displayed in modal dialog

- url: Page url or relative path

- dialogReturnValueCallback: In case we want some code to run after the dialog is closed, set JavaScript method name

- allowMaximize: Set to true or false to show hide this option.

- showClose: Set to true or false to show or hide the close button

Examples:
a. Sample code to show HTML content in the SharePoint 2010 modal dialog:

HTML code

// Modal Dialog HTML content

<div id="divModalDialogContent">

Hello World!

<input type="button" value="OK"onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Ok clicked'); return false;"

class="ms-ButtonHeightWidth" />

<input type="button" value="Cancel"onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancel clicked'); return false;"

class="ms-ButtonHeightWidth" />

</div>

JavaScript Code

<script type="text/javascript">

// Call openDialog method on button click or on page load

function openDialog() {

var options = {

html: divModalDialogContent,  // ID of the HTML tag

// or HTML content to be displayed in modal dialog

width: 600,

height: 300,

title: "My First Modal Dialog",

dialogReturnValueCallback: dialogCallbackMethod,  // custom callback function

allowMaximize: true,

showClose: true

};

SP.UI.ModalDialog.showModalDialog(options);

}

//Results displayed if 'OK' or 'Cancel' button is clicked if the html content has 'OK' and 'Cancel' buttons

function onDialogClose(dialogResult, returnValue) {

if (dialogResult == SP.UI.DialogResult.OK) {

alert('Ok!');

}

if (dialogResult == SP.UI.DialogResult.cancel) {

alert('Cancel');

}

}

// Custom callback function after the dialog is closed

function dialogCallbackMethod() {

alert('Callback method of modal dialog!');

}

</script>

b. Sample code to open a web page or application page in the modal dialog:

JavaScript code

<script type="text/javascript">

function openDialog() {

var options = {

url: "<Page Url>",

width: 600,

height: 300,

title: "My First Modal Dialog",

};

SP.UI.ModalDialog.showModalDialog(options);

}

</script>

Mentioned below are real time scenarios, you may encounter while using out of box modal dialog of SharePoint 2010 :-
1. Scenario: If page is too long and with the movement of vertical scrollbar, modal popup also move with the scrollbar. Ideally position of modal dialog should be fix.

Solution: Put mentioned below CSS class in you page:

.ms-dlgContent

{

position: fixed!important;

}

2. Scenario: Display modal popup on page load depending. Sometimes the page don't show modal dialog and a JavaScript error message comes (error: showModalDialog does not exist in SP.UI.ModalDialog).

Solution:  Use following code- ExecuteOrDelayUntilScriptLoaded(<showModelMethodName>, "sp.js");  
              This method be make sure that js method showModalDialog is not called till sp.js is fully loaded.

3. Scenario: Sometime we need to close popup from server side and also parent window refresh is required after saving modal dialog data in the SharePoint.

Solution: Mentioned below is the sample code to implement above requirement-

a.  Check current page is popup page or not

//Custom list or library form New, Edit or Display

if(SPContext.Current.IsPopUI)

{

// Code

}

OR

//Layout pages you can ensure byquery string

if(Request.QueryString["IsDlg"]=="1")

{

//code

}

b. To close popup use mentioned below JavaScript code:

<script type="text/javascript">

//Close popup on cancel button click

function CloseForm() {

window.frameElement.cancelPopUp();

return false;

}

//Commit/Refresh parent window on save button click

function SaveForm() {

window.frameElement.commitPopup();

return false;

}

</script>

c. use following server side code to close or save modal dialog:

//Put following code in the button click event, if update panel is not present in the page

ClientScript.RegisterClientScriptBlock(this.GetType(), Guid.NewGuid().ToString(),"CloseForm()", true);

OR

// Put following code in the button click event, if update panel is present in the page

ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), Guid.NewGuid().ToString(),"CloseForm()", true);

4. Scenario: After closing modal dialog, all controls disappear from the page.

Solution: If you assign HTML element id like we have done in our first example, you might encounter this issue, we should set copy of modal data instead of assigning ID. See sample code below:

<script type="text/javascript">

//Pass copy of HTML content instead of content control ID

function openDialog() {

var cloneModalContent = document.createElement('div');

cloneModalContent.innerHTML = document.getElementById('divModalDialogContent').innerHTML;

var options = {

html: cloneModalContent, //html content to be displayed in modal dialog

width: 600,

height: 300,

title: "My First Modal Dialog",

dialogReturnValueCallback: customOnDialogClose, //custom callback function

allowMaximize: true,

showClose: true

};

SP.UI.ModalDialog.showModalDialog(options);

}

</script>

Updated following real time scenario solution on 17 November, 2011:
 
a. To resolve position issue of modal dialog, we need to add "ms.ModelContent" css class. But correct CSS class name is "ms-dlgContent". Thank you "Athula Nidheesh" to rectify my mistake.

b. Sample code to save or close popup from server side.

c. After closing modal dialog, all controls disappear from the page.

SharePoint 2010 Modal Dialog的更多相关文章

  1. SharePoint 2010 Pop-Up Dialogs

    转:http://kyleschaeffer.com/sharepoint/sharepoint-2010-pop-up-dialogs/ SharePoint 2010 makes it incre ...

  2. Using SharePoint 2010 dialogs

    转:http://www.techbubbles.com/sharepoint/using-sharepoint-2010-dialogs/ SharePoint 2010 dialogs are J ...

  3. Upgrade from SharePoint 2010 to SharePoint 2016

    [转]http://nikcharlebois.com/upgrade-from-sharepoint-2010-to-sharepoint-2016/ In this blog, I will go ...

  4. SharePoint 2010 常用技巧及方法总结

    1.代码调试确定进程cd c:\windows\system32\inetsrvappcmd list wppause注:保存成批处理文件,查看进程.bat,用的时候双击即可 2.类似列表新建打开方式 ...

  5. 使用SharePoint 2010 母版页

    SharePoint 2010母版页所用的还是ASP.NET 2.0中的技术.通过该功能,实现了页面框架布局与实际内容的分离.虽然在本质上自定义母版页的过程和以前版本的SharePoint大致相同,但 ...

  6. Searching External Data in SharePoint 2010 Using Business Connectivity Services

    from:http://blogs.msdn.com/b/ericwhite/archive/2010/04/28/searching-external-data-in-sharepoint-2010 ...

  7. How to: Add SharePoint 2010 Search Web Parts to Web Part Gallery for Upgraded Site Collections

    When you upgrade to Microsoft SharePoint Server 2010, some of the new SharePoint Enterprise Search W ...

  8. Creating SharePoint 2010 Event Receivers in Visual Studio 2010

    转:http://msdn.microsoft.com/en-us/library/gg252010(v=office.14).aspx Summary:  Learn how to create a ...

  9. 使用SharePoint 2010的母版页

    转:http://tanyanbo2.blog.163.com/blog/static/97339159201111591458902/ SharePoint 2010母版页所用的还是ASP.NET ...

随机推荐

  1. sqlserver2012评估期已过问题处理

    于之前安装sqlserver2012忘记输入序列号,现在出现评估期已过的问题,网上忙活半天,才解决,发现网上叙述都很凌乱,而且只有大意,新手很难操作,所以把我操作的过程分享给大家 步骤阅读   百度经 ...

  2. 自动安装memcached服务端与PHP扩展Memcached

    该脚本基于阿里云服务器安装脚本,并只能运用于centos / aliyun os,该脚本使用时,需要与阿里云安装脚本的install.sh放在同一目录下.有缘人切忌乱用: #! /bin/bash # ...

  3. MarkDown初遇

    MarkDown初遇 纠结盘桓许久,由于那只胖纸,最终决定再次捡起博客这个东东,记录记录生活中.心灵里的点点滴滴. 寻觅的过程中忽然发现MarkDown这个东东,查了查,学习成本不高,简洁而标准,关键 ...

  4. HDU 3127 WHUgirls

    二维完全背包,理解似乎还不够全面,过几天回来再看看这题. #include<cstdio> #include<cstring> #include<cmath> #i ...

  5. 在magento里把查询语句转换称sql语句

    在magento里把查询语句转换称sql语句 $order->getSelectsql(true); order为对象.

  6. win10桌面和手机的扩展API,判断是否有实体后退键API

    喜大普奔的win10 uap开发预览版终于出了,这次更新跟8.1的变化不是很大,但是将原本win8.1和wp8.1uap的分项目的形式,改为了整合成一个项目,经过一次编译打包成一个appx包,实现了无 ...

  7. 分享给大家一个简单的数据导出excel类

    <?php /** * 生成excel文件操作 * * @author wesley wu * @date 2013.12.9 */ class Excel { private $limit = ...

  8. 使用SQL 从表中取记录

    SQL 的主要功能之一是实现数据库查询. 你使用查询来取得满足特定条件的信息. 一个简单的表查询实例 SQL 查询的句法非常简单.假设有一个名为email_table 的表,包含名字和地址两个字段,要 ...

  9. hdu_5969_最大的位或(贪心)

    题目链接:hdu_5969_最大的位或 题意: 中文,还是自己看 题解: xjb贪心一下就行了 #include<bits/stdc++.h> #define F(i,a,b) for(i ...

  10. asp.net分页代码(教你怎么实现)

    直接上代码: css部分代码 .pageCss { float: right; width: auto; height: 30px; line-height: 30px; margin-right: ...