How to make a Web-part to
open as a Pop-up in a SharePoint page when the page loads?
Solution:
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 /Style Library.
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
<style>
.ms-breadcrumb-box, .ms-mpSearchBox, #sideNavBox, .article-content > .ms-rtestate-field > p, #footer {
display: none;
}
#titleAreaBox {
margin: 0;
}
.ms-siteicon-a {
cursor: default;
text-decoration: none;
}
.ms-siteicon-img {
max-width: 180px !important;
max-height: 64px !important;
}
#contentRow {
padding: 0;
}
#contentBox {
margin: 0;
min-width: inherit;
}
div.article, .article-content {
padding: 0;
}
.ms-webpartzone-cell {
margin-bottom: 5px;
}
</style>
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 /Style Library/Pop-up-Page.css
7. Don’t forget to remove the page Title.
8. Create a JS file with the below content:
<script
type="text/ecmascript">
function
setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() +
(exdays*24*60*60*1000));
var expires =
"expires="+d.toUTCString();
document.cookie = Popup + "=" +
cvalue + "; " + expires;
}
function
getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c =
c.substring(1);
if (c.indexOf(name) != -1) return
c.substring(name.length, c.length);
}
return "";
}
var
Cookievalue=getCookie("Popup");
if (Cookievalue !=
"") {
} else {
SP.SOD.executeFunc('sp.js',
'SP.ClientContext', ShowDialog);
}
function
ShowDialog() {
var options = {
url: 'http://YourWebApplication/Pages/pop-up-page.aspx',
dialogReturnValueCallback:CloseCallback,
height: 400,
width:800
};
SP.UI.ModalDialog.showModalDialog(options);
}
function
CloseCallback(result, target) {
if(result==SP.UI.DialogResult.OK) {
window.location.href='http:// YourWebApplication
/Pages/ pop-up.aspx';
}
if(result==SP.UI.DialogResult.cancel){
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,'cancel
Clicked');
}
}
</script>
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:
<script
type="text/ecmascript">
SP.SOD.executeFunc('sp.js',
'SP.ClientContext', ShowDialog);
function ShowDialog() {
var options = {
url: 'http://YourWebApplication/Pages/pop-up-page.aspx',
dialogReturnValueCallback:CloseCallback,
height: 400,
width:800
};
SP.UI.ModalDialog.showModalDialog(options);
}
function
CloseCallback(result, target) {
if(result==SP.UI.DialogResult.OK) {
window.location.href='http:// YourWebApplication
/Pages/ pop-up.aspx';
}
if(result==SP.UI.DialogResult.cancel){
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,'cancel
Clicked');
}
}
</script>
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
/SiteAssets/Pupop.js
12. Also you can use the below script in your Web-part to close the
popup, Set Cookie or change the popup height.
<script>
function ClosePopup() {
window.frameElement.cancelPopUp();
}
function SavedInlist() {
setCookie("Popup", "saved", 180);
}
function CloseAndSavedInlist()
{
setCookie("Popup", "saved", 180);
window.frameElement.cancelPopUp();
}
function setCookie(cname,
cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24
* 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function ChangeHight() {
window.frameElement.style.height = "500px";
}
</script>
For example if there is a
NO button in your Web-part, you can use the ClosePopup() function to close the popup from your Web-part.
<asp:Button ID="No" runat="server" CSSClass="Btn" Text="No" OnClientClick="ClosePopup()"/>
Happy SharePointing
Kate
