How to make a Web-part to open as a Pop-up in a SharePoint page when the page loads?
1. Build your Web-part ( use Visual Studio to create your WebPart)
2. Create 2 CSS file Pop-up-Page.css and Pop-up-WebPart.css.
Add these 2 CSS file to .
You can link the Pop-up-WebPart.css file in your VisualWebPart.ascx file to be able to style your Web-part as below.
<link href="../Style Library/Pop-up-WebPart.css" rel="stylesheet" />
3. Use the Pop-up-Page.css to hide all content and the SP Ribbon except for the WebPart you’ve added to the page. So when you navigate to this page you’ll see just your WebPart but nothing else (no SP Ribbon, no footer, no Menu …).
Here is inside my Pop-up-Page.css file
4. In your SharePoint Site, add a page name Pop-up.aspx
5. Edit this page and add your WebPart.
6. Add a Content Editor with
7. Don’t forget to remove the page Title.
8. Create a JS file with the below content:
9. As you see I have a function getCookie(cname) in the JS file above. I use it to set Cookie for my Pop-up. If you don’t need Cookie, then you can use the below JS code:
10. Add the popup.js file to
11. If you want this page(with your Web-part) to pups-up when users navigate to your homepage, then edit the Home page > Add a Content Editor with
12. Also you can use the below script in your Web-part to close the popup, Set Cookie or change the popup height.