--- title: "Tips & Tricks: SharePoint 2013 Modal Dialogs" description: Previously, we shared tips and tricks with regards to SharePoint 2010 modal dialogs. Now, we're bringing you updates for SharePoint 2013. image: https://blog.collabware.com/hubfs/Imported_Blog_Media/img-83.png --- [![Collabware | Intelligent ECM and Records Management in SharePoint](https://blog.collabware.com/hubfs/Collabware%20-Mar2018/Template/Image/logo.png)](https://collabware.com/) - Solutions - [Information Archiving](https://collabware.com/enterprise-information-archiving) - [Information Discovery - FOIA, ATIP, etc](https://collabware.com/productivityhttps://collabware.com/foi-atip-gdpr-software) - [Email Records Management](https://collabware.com/email-records-management) - [File Share Protection](https://collabware.com/file-share-protection) - [SAP - Sharepoint Integration](https://collabware.com/sap-to-sharepoint-integration) - [Government](https://collabware.com/government) - [Oil & Gas](https://collabware.com/oil-gas) - Products - [Collabspace ARCHIVE](https://collabware.com/collabspace-archive) - [Collabspace DISCOVERY](https://collabware.com/collabspace-discovery) - [Collabspace CONTINUUM](https://collabware.com/collabspace) - [Collabmail](https://collabware.com/collabmail) - [Collabware CLM](https://collabware.com/collabware-clm) - [Certifications](https://collabware.com/certifications) - [Pricing](https://collabware.com/pricing) - [Blog & News](https://blog.collabware.com) - Support - [Help Center](https://collabware.com/support) - [Collabspace Self-Service Program](https://info.collabware.com/collabspace-self-service-pro) - [Collabware University - Training](https://university.collabware.com/home) - Company - [About Us](https://collabware.com/about-us) - [Services](https://collabware.com/services) - [Partners](https://collabware.com/partners) - [Leadership Team](https://collabware.com/leadership) - [Careers](https://collabware.com/careers) - [Events](https://collabware.com/events) - - [Contact](https://collabware.com/contact-us) - [Demo](https://collabware.com/demo) ![Collabware Blog](https://blog.collabware.com/hs-fs/hubfs/Collabware%20-Mar2018/Blog/Image/collabware_blog.png?width=1920&height=667&name=collabware_blog.png) **Collabware Blog** Tips & Tricks, How To's and General News in the World of Information Governance - [All](https://blog.collabware.com) - [Records Management](https://blog.collabware.com/topic/records-management) - [Company News & Press](https://blog.collabware.com/topic/company-news-press) - [SharePoint](https://blog.collabware.com/topic/sharepoint) - [Collabspace](https://blog.collabware.com/topic/collabspace) - [Collabware CLM](https://blog.collabware.com/topic/collabware-clm) # Tips & Tricks: SharePoint 2013 Modal Dialogs [Sing Chan](https://blog.collabware.com/author/sing-chan), Jul 02, 2020 Share - [Tweet](https://twitter.com/share) ![SharePoint Icon](https://blog.collabware.com/hs-fs/hubfs/Collabware%20-Mar2018/Blog/Image/SharePoint%20Icon.png?width=150&height=150&name=SharePoint%20Icon.png)Previously, I posted some [tips and tricks with regards to SharePoint 2010 modal dialogs](https://blog.collabware.com/blog/2012/10/30/tips-tricks-sharepoint-2010-modal-dialogs). Now I'm back with some updates for SharePoint 2013. The Dialog API has not changed much from SP2010 to SP2013. Opening, closing, callbacks, etc are the same as before and you can reference my [previous post](https://blog.collabware.com/blog/2012/10/30/tips-tricks-sharepoint-2010-modal-dialogs) for all that stuff. ### Loading Wait Screen and showWaitScreenWithNoClose The signature for [**SP.UI.ModalDialog.showWaitScreenWithNoClose**](http://msdn.microsoft.com/en-us/library/ff408140.aspx) has not changed, but MS has updated the rendering for the UI. It no longer looks different than the default loader, so no more private API calls for us!  SharePoint 2013's default loading message: ![SharePoint 2013's default loading message.](https://blog.collabware.com/hs-fs/hubfs/Imported_Blog_Media/img-104.png?width=408&name=img-104.png "SharePoint 2013's default loading message.")     The default loading message has now changed to this: You can bring this up by calling: ``` SP.UI.ModalDialog.showWaitScreenWithNoClose(SP.Res.dialogLoading15); ```   Calling the method with both title and message: ``` SP.UI.ModalDialog.showWaitScreenWithNoClose('Loading Title', 'Loading Message Here...'); ``` ```   ``` Loading modal using SP.UI.ModalDialog.showWaitScreenNoClose(): ![Loading modal using SP.UI.ModalDialog.showWaitScreenNoClose()](https://blog.collabware.com/hubfs/Imported_Blog_Media/img-83.png) Loading modal using SP.UI.ModalDialog.showWaitScreenNoClose()   ### Resizing Modal Dialogs **DISCLAIMER:** Some of the code below uses private functions/methods of the SP2013 API. I can't guarantee that this will work throughout the life of SP2013 updates. The internal variables and methods were updated in the 2013 version of SP.UI.ModalDialog. Logic remains the same and here's the updated code: ``` // wrapper which ensures SP.UI.Dialog.js is loaded before re-size fires.// (if you need to trigger a re-size in your init scripts as the JS library is loaded asyncronously) ``` function resizeModalDialog() { SP.SOD.executeOrDelayUntilScriptLoaded(\_resizeModalDialog, 'sp.ui.dialog.js'); } function \_resizeModalDialog () { // get the top-most dialog var dlg = SP.UI.ModalDialog.get\_childDialog(); if (dlg != null) { // dlg.$Q\_0 - is dialog maximized // dlg.get\_$b\_0() - is dialog a modal if (!dlg.$Q\_0 && dlg.get\_$b\_0()) { // resize the dialog dlg.autoSize(); var xPos, yPos, //x & y co-ordinates to move modal to... win = SP.UI.Dialog.get\_$1(), // the very bottom browser window object xScroll = SP.UI.Dialog.$1x(win), // browser x-scroll pos yScroll = SP.UI.Dialog.$20(win); // browser y-scroll pos //SP.UI.Dialog.$1P(win) - get browser viewport width //SP.UI.Dialog.$1O(win) - get browser viewport height //dlg.$3\_0 - modal's DOM element // calculate x-pos based on viewport and dialog width xPos = ((SP.UI.Dialog.$1P(win) - dlg.$3\_0.offsetWidth) / 2) + xScroll; // if x-pos is out of view (content too wide), re-position to left edge + 10px if (xPos < xScroll + 10) { xPos = xScroll + 10; } // calculate y-pos based on viewport and dialog height yPos = ((SP.UI.Dialog.$1O(win) - dlg.$3\_0.offsetHeight) / 2) + yScroll; // if x-pos is out of view (content too high), re-position to top edge + 10px if (yPos < yScroll + 10) { yPos = yScroll + 10; } // store dialog's new x-y co-ordinates dlg.$K\_0 = xPos; dlg.$W\_0 = yPos; // move dialog to x-y pos dlg.$p\_0(dlg.$K\_0, dlg.$W\_0); // set dialog title bar text width dlg.$1b\_0(); // size down the dialog width/height if it's larger than browser viewport dlg.$27\_0(); } } } ### 2010 Experience and Version Detection When you create a Site Collection in SharePoint 2013, you have the option of using the old 2010 experience. The SP.UI.Dialog.js file that is loaded on the page is different when in 2013 vs 2010 experience mode. Be aware that if you want to use a single artifact for your scripts, you'll need to have different code branches. You can check in JavaScript by referencing **SP.OfficeVersion.majorVersion**. It will return a string of either **"15"  **  when in 2013 mode or **"14"   ** in 2010 mode. #### function \_resizeModalDialog () { if (SP.OfficeVersion.majorVersion == "14") { // SP2010 code here... } else { // SP2013 code here... } } To learn more about how Collabware enhances SharePoint for Compliant Records Management, visit our Collabware CLM page or download the brochure instantly: ![Collabware-CLM-Brchoure-Preview](https://blog.collabware.com/hs-fs/hubfs/Brochures-Icons/Collabware-CLM-Brchoure-Preview.png?width=200&height=175&name=Collabware-CLM-Brchoure-Preview.png) [![Access CLM Brochure](https://no-cache.hubspot.com/cta/default/3341329/3c60c7e0-597e-48a9-8ec8-f2df5a6ca500.png)](https://cta-redirect.hubspot.com/cta/redirect/3341329/3c60c7e0-597e-48a9-8ec8-f2df5a6ca500)   Share - [Tweet](https://twitter.com/share) **Tagged:** [SharePoint](https://blog.collabware.com/topic/sharepoint), [Development](https://blog.collabware.com/topic/development) ### Related posts ![How to Integrate Search Tools into SharePoint Online](https://blog.collabware.com/hubfs/1-1-1.png) [How to Integrate Search Tools into SharePoint Online](https://blog.collabware.com/how-to-integrate-search-tools-into-sharepoint-online) ![5 Analytics Features to Understand Organization-Wide Data at a Glance](https://blog.collabware.com/hubfs/dashboard_complete-2.png) [5 Analytics Features to Understand Organization-Wide Data at a Glance](https://blog.collabware.com/5-analytics-features-to-understand-organization-wide-data-at-a-glance) Search Search Google [![Collabspace Cloud ECM](https://blog.collabware.com/hs-fs/hubfs/image-png-Jun-02-2022-02-16-18-53-PM.png?width=446&name=image-png-Jun-02-2022-02-16-18-53-PM.png)](http://www.collabware.com/collabspace) ### Blogs by Topic - [Records Management (109)](https://blog.collabware.com/topic/records-management) - [Company News & Press (79)](https://blog.collabware.com/topic/company-news-press) - [SharePoint (72)](https://blog.collabware.com/topic/sharepoint) - [Collabspace (55)](https://blog.collabware.com/topic/collabspace) - [Collabware CLM (48)](https://blog.collabware.com/topic/collabware-clm) - [Compliance (47)](https://blog.collabware.com/topic/compliance) - [Automation (46)](https://blog.collabware.com/topic/automation) - [Development (35)](https://blog.collabware.com/topic/development) - [ECM (34)](https://blog.collabware.com/topic/ecm) - [Collabware Culture (33)](https://blog.collabware.com/topic/collabware-culture) ### Recent Posts ### COLLABWARE ON SOCIAL MEDIA Register for RIM Tips & Tricks, Industry News & more! See how Collabware can help ensure you meet your governance and compliance requirements now... [Request a demo](https://collabware.com/demo) ### FOR PRICING & SALES INQUIRIES Toll Free: [1-855-268-0442](tel:+18552680442) Local: [778-724-1812](tel:7787241812) [contact@collabware.com](mailto:sales@collabware.com) ### FROM OUR TWITTER [Tweets by collabware](https://twitter.com/collabware) ### COMPANY - [About Collabware](https://collabware.com/about-us) - [Blog & News](https://collabware.com/blog) - [Events & Webinars](https://collabware.com/events) - [Contact Us](https://collabware.com/contact-us) - [Careers](https://collabware.com/careers) - [Support](https://collabware.com/support) ### SOLUTIONS [SharePoint Records Management](https://collabware.com/collabware-clm) [Outlook SharePoint Connector](https://collabware.com/collabmail) [Data Protection, eDiscovery & Archive](https://collabware.com/collabspace) © Collabware 2023. All rights reserved. [Privacy Policy](https://collabware.com/privacy-policy) [Sitemap](https://collabware.com/sitemap.xml)