SharePoint 2010 Modal Dialog Pop up


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>

 

Comments

Post a Comment

Popular posts from this blog

PAGE NOT FOUND ERROR PAGE IN SHAREPOINT 2013

Image
Default PageNotfound\404 page   - By default, all the Publishing sites contain a default Error\404 page  “PageNotFoundError .aspx” page which is added to the “Pages” library (See below). This page can be modified to add some custom text. “Error Page” Content Type -   To allow users to Create a new 404 Error page, Publishing Sites now contain a new Content Type “ Error Page “.This Content type Inherits from “Page” Content type and has a typical layout of a Page Not found or 404 pages. To find this Content type Navigate to Site Settings -> Content Types -> Error Page. Create a New PageNotFound or 404 Page  – To Create a new 404 page admins can navigate to the “Pages” Library and under the “Files tab” select “New Document”.In the “New Document” drop-down menu select “Error Page” (see the screen below). Once you have Created a new Error Page you can modify it by simply clicking the page in the pages library and editing it. Once do...
Keep reading

Hide the Upload Button of the Doucment Library

Open your site using SharePoint Designer.  Once opened, navigate to your Library and edit your default view.  (All Files -> Your Library -> Forms -> Your View.aspx , right click and select Edit File in Advanced Mode) At the bottom of the screen you will see three options Design, Split, and Code.  Select the Split option. In your code window, locate the  <asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>   tag. Now, scroll down and find the closing  </asp:Content> tag.  Insert a line above the closing tag.  Place the following code into that newly created blank line. <style type="text/css">  #Ribbon\.Documents\.New\.AddDocument-Large { display:none; }  #Ribbon\.Library\.Actions\.OpenWithExplorer-Medium { display:none; } </style> Click save, then refresh your page.  The Documents tab should now be missing the Upload Document button and the Library tab should be...
Keep reading

Get Host site list items in SharePoint Hosted App.

Those who starts working on Apps might face issues to read host site list items. In sharepoint hosted APP using Rest API we able to query host site list items. The rest url to get host site is almost similar to get list items but we need to specify the app context and target. Make sure JQuery loaded before to execute the code in app web parts. 'use strict'; var HostUrl=""; var AppUrl==""; // load function // Intialize HostUrl, AppUrl from query strings. // call get items method $(document).ready(function () {         HostUrl= GetQueryString("SPHostUrl");        // Get Host Url from query string         AppUrl= GetQueryString("SPAppWebUrl");        // Get App Url from query string getItems("DemoList");                   ...
Keep reading