SharePoint 2010 pop-up dialogs SharePoint 2010 dialog box

SharePoint 2010 pop-up dialogs SharePoint 2010 pop-up dialog box SharePoint 2010 makes the content of the add dialog box to your website unexpected simple. The built-in function allows you to extract content from any part of the site, and then display the content in the modal dialog box at the front end of the page. When it comes to modern Web technology, this is a standard, but usability is the main reason for making SharePoint dialogs so attractive. In this article, we will explore the dialog box function provided by the SharePoint 2010 platform, and we will find a new way to customize the content to bring a unique and fresh look to your SharePoint Portal. The dialog box in SharePoint 2010, although (possibly) You have chosen not to understand the dialog box in SharePoint 2010, has been applied on the entire SharePoint platform, such as pages, lists, and libraries. For example, every time you create a new page, you will see a dialog box on the page. This is almost the case.
When you create and edit a list project, you will see a similar dialog box and any document libraries created in the website set. These pop-up forms and views are part of the overall SharePoint 2010 platform. Working principle the SharePoint 2010 dialog box is very simple. They are basically a javascript pop-up dialog box that contains an IFRAME request from other places on the website. This content can be anything inside Sharepoint, or even a publishing page or a custom application page you have created. If you have created your own master page in SharePoint 2010, you may be confused when you try to apply your new master page to your website. SharePoint 2010 isolates your master page authorization between the website template page and the system master page. Basically, your website template page is applied to pages, lists, and libraries, and the system master page is applied to other places (settings, permissions, management, and dialog boxes ). When you call the pop-up dialog box in SharePoint 2010, the content is requested and displayed on the system master page. If you want to start customizing how your dialog box appears in SharePoint 2010, you must first set the custom master page format to work as a system master page. If you want to optimize the master page to use the dialog box, the most important thing is to design which page elements should be hidden in the dialog box. If you open Microsoft's v4.master file, you may notice that class = "s4-notdlg" appears in many places in the file. This s4-notdlg class name should be applied to the stuff you want to hide in the dialog view. This means the title, footer, navigation, and sidebar. Basically, you will want to add this CSS class to all the stuff except the main content area you designed. When the dialog box is displayed, any stuff with the s4-notdlg CSS class will be automatically hidden (reduced. With styles, your design may have a fixed width or at least a minimum display width. The dialog box is small, so the width and size formats are not necessarily perfectly displayed in the dialog box view. Fortunately, your master page is used to display the dialog box content at any time, and the HTML element gets a special CSS class name, MS-dialog. You can use it to overwrite any previously set style so that it is correctly displayed in common and dialog box views. For example, you may have a div element (ID: wrapper) in your design. In the attached CSS file, you can add a style to this element (when it appears in a common or dialog box)

#wrapper {  width: 960px;  margin: auto;}html.ms-dialog #wrapper {  width: 100%;}

In the preceding example, the wraper element is switched to the automatic width and appears in the SharePoint 2010 dialog box. You may have to use this technique to process columns, background colors, and other design elements that appear in the dialog box. Since your master page is optimized for dialog box use, it is time to extract some content from your SharePoint website. It is very easy to create a popup link. In any page or Content Editor webpart, create a link to request a dialog box page:

<a href="javascript:OpenPopUpPage('/path/to/content.aspx');">Show Me the Pop-Up!</a>

You can use the openpopuppage function to view any content in dialog box mode. There is also a more flexible function openwebpage that allows you to specify the width and height of the dialog box. Using these functions in combination with the custom system master page, you can display fewer and fewer items in the dialog box in Sharepoint. Progressive enhancement I am very concerned about accessibility, and I really don't like someone asking me to add JavaScript to the link element :. Users without JavaScript cannot access this link. More importantly, search engines like Google or bing cannot track content associations on your site. This may be a big problem, and therefore, I do not recommend using the above methods in the dialog box in the SharePoint site. A better method involves an exercise in progressive enhancement. Progressive enhancement requires you to enable as few features as possible in your browser when creating a solution for users. This means creating a simple HTML link pointing to the real webpage content. By creating simple HTML links, you can ensure that everyone (including search engines) can identify and use the links on your site. For other users, such as those who enable Javascript, you can use the pop-up dialog box to display content faster and enhance their experience. This is very simple in SharePoint 2010, just because our custom master page has been formatted to display the content of the normal and dialog box. We can easily guide users to a common view of the content, and overwrite that feature for users who enable scripts on the site. SharePoint and the pop-up box are integrated into the real progressive enhancement style. I have created a simple jquery function to convert any common link in the site to the pop-up dialog box link, only associate a CSS class. Add this feature to your SharePoint 2010 site: 1. Make sure that the jquery script library is appended to the master page or page layout. 2. Add the following jquery function to the appended Javascript file:

(function($){  $.fn.sharePop = function(){    if(typeof OpenPopUpPage == 'function'){      return this.each(function(i){        if($(this).attr('href') != null){          $(this).click(function(e){            e.preventDefault();            OpenPopUpPage($(this).attr('href'));          });        }      });    }    else{      return false;    }  };})(jQuery);

3. Add a unique CSS class name to the link to display the dialog box View:

<a href="/path/to/content.aspx" class="dialog-pop">View Content</a>

4. Run the script (add it to the appended Javascript file ):

$(document).ready(function(){$('.dialog-pop').sharePop();});

My script overwrites the default features of these links and forces them to display the SharePoint 2010 dialog box view. Users who do not use JavaScript can also access the content (using a common view ). The last thing to consider about the dialog box style is the style of the dialog box. The dialog box HTML gives you many CSS classes that allow you to completely customize the appearance of the dialog box window, and even the appearance of the shadow area behind it. The following figure shows the html of the SharePoint dialog box and highlights some important CSS classes. You will use them to change the appearance of the window.

With these classes, you can create a unique appearance of the dialog box. Here is an example of a black topic dialog box.

.ms-dlgOverlay {  background-color: #333;}.ms-dlgContent {  border: 0;}.ms-dlgBorder {  border: 1px solid #333;}.ms-dlgTitle {  background-color: #333;}.ms-dlgTitleText {  display: block;  font-weight: bold;  font-size: 13px;  padding: 7px;}

After adding CSS to the appended CSS style sheet, we get a fully customized dialog box appearance, with the custom content appearing inside the dialog box.

The SharePoint 2010 dialog box also brings many elements that require both practice and determination to bring together these elements. If you can do this once, you will find that these custom dialogs are a simple, fast, and amazing tool added to your SharePoint 2010 design. Link: http://kyleschaeffer.com/sharepoint/sharepoint-2010-pop-up-dialogs/