Home Library Learn Downloads Support Community
Sign in | United States - English | |
This topic has not yet been rated Rate this topic

SP.UI.ModalDialog Class

SharePoint 2010

Represents a modal dialog.

Copy 
SP.UI.ModalDialog

SP.UI.Dialog Class

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
Add lightbox - modal dialog - to a view item link in itemstyle.xsl file for a content query web part
To have a modal dialog window  - a lightbox, open when clicking a link of an item on the content qury web part, similar to the default item click behavior on Shareoint 2010. 
The content query web part can use a custom item style,
The item style is defined in the itemstyle.xsl file.

variables SafeLinkUrl and DisplayTitle definition:
.....
<xsl:variable name="SafeLinkUrl">
<xsl:call-template name="OuterTemplate.GetSafeLink">
<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
</xsl:call-template>
</xsl:variable>

<xsl:variable name="DisplayTitle">
<xsl:call-template name="OuterTemplate.GetTitle">
<xsl:with-param name="Title" select="@Title"/>
<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
</xsl:call-template>
</xsl:variable>
.....

link :
<div class="ms-vb" >
<xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<a href="{$SafeLinkUrl}" title="{@LinkToolTip}" >
<xsl:attribute name="onclick">SP.UI.ModalDialog.showModalDialog({url:'<xsl:value-of select="$SafeLinkUrl"/>' });return false;</xsl:attribute>
<xsl:value-of select="$DisplayTitle"/>
</a>
</div>

......
History
Show dialog mit the content from a div

If you want to use the dialog like a dynamic messageBox you can use the content of a div for your dialog.

The snippet shows how to implement the content of a div in a SP.UI.ModalDialog-window.

<script type="text/javascript">
    function showDialog() {
        var _html = document.createElement('div');
        _html.innerHTML = document.getElementById('TestDiv').innerHTML;
        var _options = { html: _html };
        SP.UI.ModalDialog.showModalDialog(_options);
    }
</script>

<div id="TestDiv">
    <h1>Hello</h1>
    <h3>Helloo Robert</h3>
    <asp:Button ID="Button2" runat="server" Text="Button" />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>

History
How-To article covering the Dialog framework and the elusive SP.UI.DialogOptions
I've written up an article that covers how to use the Dialog framework in conjunction with the dialog.master masterpage that ships with SharePOint 2010.

http://www.chaholl.com/archive/2010/11/17/using-the-dialog-framework-in-sharepoint-2010.aspx

History
Getting access to the DOM window element
$0$0 $0$0 $0$0 $0$0 $0$0 $0

It took me a while to figure out how to create a modal dialog window that was dynamically specified through javascript. The problem I ran into is that there are no public properties that give you a reference to the DOM's "window" object. I therefore thought I would report my findings here. I hope you find it helpful. Please be aware that I did a cut and paste and I might have screwed up a key stroke, but this does work (minus any mis-typings).

FYI: I am using System.Windows.Browser.HtmlPage.Window.Eval("some javascript code") to execute the following code within a silverlight control.

---- begin javascript ----

 function GenerateDocumentFromBiscayneFO_Button_Callback(dialogResult, returnValue)
 {
 //SP.UI.Notify.addNotification('Operation Successful!');
//SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
 }


 var options = { 
 url: '#',
 title: 'Dynamic JS Page', 
 allowMaximize: false, 
 showClose: true, 
 width: 800, 
 height: 600, 
 dialogReturnValueCallback: GenerateDocumentFromBiscayneFO_Button_Callback 
 }; 


 var dialogSP = SP.UI.ModalDialog.showModalDialog(options);
 dialogSP.get_frameElement().contentWindow.document.write('<html><body>Here is some dynamic text</body></html>');

---- end javascript ----


DallasT [MSFT] - You can do this much more easily using the html attribute in the options.

var options = {
  html: '<html><body>Here is some dynamic text</body></html>',
  title: 'Dynamic JS Page',
  ...
  };

  var dialogSP = SP.UI.ModalDialog.showModalDialog(options);

$0 $0$0 $0$0 $0$0 $0$0 $0$0
History