Home » SharePoint Branding » How to Create a Pop-Up Dialog in SharePoint?

How to Create a Pop-Up Dialog in SharePoint?

in - on 2:17 PM - 91 comments
Business Cases:
§  Simple Case. (If you want to open SharePoint dialog and don't care about width, height ...).
§  Complex Case. (To control dialog properties such as title, width, callback functions ….).
§  Notification. (To notify user about any information).
§  Loading Wait Screen. (Working on it dialog).
§  Open Modal Dialog in custom action (ECB Menu).

Note : all this cases valid for application pages and web part pages.


Business Cases Details:
Case One (Simple Case)
By using SP.UI.ModalDialog.OpenPopUpPage(url, callback, width, height); javascript function.
url : The URL of the page to be shown in the modal dialog.
callback : function pointer to callback function that runs when the modal dialog is closed.
width : The width of the modal dialog.
height : The height of the modal dialog.

Demo:
1-    Edit page and embed code in it

2-    Put this markup in the page source

 <a href="javascript:OpenPopUpPage('http://bing.com');">Test Link</a>

This method is very simple but it has many disadvantages:
1-    fixed title.

Case One (Complex Case)
By using Modal Dialogs.
Modal Dialogs are one of the new features provided by SharePoint 2010. It's the dialog framework provided by the JavaScript client object model. Modal Dialogs can fetch data from anywhere and display it over the page. One good feature about the Modal Dialogs is, there won't be any navigation to another page, making the user to stay in the context of the current page. The number of post backs will also be reduced by using modal dialogs. These dialogs are used in a large scale in many of the operations, like creating a page, viewing/editing item properties etc.
These dialogs are JavaScript pop up dialogs with an iFrame in which the data is displayed.
'SP.UI' namespace from the client object model provides a static class 'SP.UI.ModalDialog' with many methods which are used for creating dialogs and controlling their behavior. 
Demo
1-    Create Content Editor Web Part.
2-    Edit source and write this script
<script type="text/javascript">
//User Defined Function to Open Dialog Framework
function OpenDialog(strPageURL)
{
  var dialogOptions = SP.UI.$create_DialogOptions();
  dialogOptions.url = strPageURL;// URL of the Page
  dialogOptions.title = 'Welcome to SharePoint'
  dialogOptions.allowMaximize= true
  dialogOptions.width = 750; // Width of the Dialog
  dialogOptions.height = 500; // Height of the Dialog
  dialogOptions.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback); // Function to capture dialog closed event
  SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog
  return false;
}

// Dialog close event capture function
function CloseCallback(strReturnValue, target)
{
  if (strReturnValue === SP.UI.DialogResult.OK) // Perform action on Ok.
    {
   alert("User clicked Ok!");
    }
  if (strReturnValue === SP.UI.DialogResult.cancel) // Perform action on Cancel.
   {
   alert( "User clicked Cancel!");
   }
}

</script>
<a onclick="OpenDialog('http://bing.com');">open dialog</a>​


Different Properties
There are various properties the showModalDialog() method accepts through the options object. Below is the list of these properties
Property Name
Type
Description
allowMaximize
boolean (true/false)
Determines the visibility of the maximize button (at top right corner) for the modal dialog
Args
Object
The args property allows us to pass arbitrary properties into our dialog.
autoSize
boolean (true/false)
dialogReturnValueCallback
Function
This property accepts a callback function which gets executed when the dialog is closed.
Height
Numeric
The height of the dialog
Html
HTML Element
The HTML to be rendered in the window (when the URL property is not specified)
showClose
boolean (true/false)
Determines the visibility of the close button (at top right corner) for the modal dialog
showMaximized
boolean (true/false)
If set to true, the dialog will render maximized, ie., it fills the available screen space.
Title
string
Title of the modal dialog. When no title is specified, the title of the document referred to by the Url property is used instead.
url
string
The URL of the page to be shown in the dialog.
Width
numeric
The width of the dialog to be displayed
X
numeric
Specifies the starting position from the left, where the dialog is to be rendered
Y
numeric
Specifies the starting position from the bottom, where the dialog is to be rendered

Another Demo:
<script type="text/javascript">
function ShowWelcomeDialog()
{
var htmlP = document.createElement('p');
var htmlMsg = document.createTextNode('Our SharePoint blog');
htmlP.appendChild(htmlMsg);
var options ={
html: htmlP,
title:'Welcome to SharePoint Developers Hub',
width:400,
height:75,
dialogReturnValueCallback: ShowStatus
};
SP.UI.ModalDialog.showModalDialog(options);
}

function ShowStatus(dialogResult, retValue)
{
SP.UI.Notify.addNotification("The dialog is closed");
}
</script>
<a title="Open Dialog" href="javascript:ShowWelcomeDialog();">Open Dialog</a>

Case Three (Notification)
Demo
<script>
function Notify()
{
SP.UI.Notify.addNotification("Every thing is ok.");
}
</script>
<a href="javascript:Notify();">Notify me</a> ​​


Case Four (Loading Wait Screen)
By using SP.UI.ModalDialog.showWaitScreenWithNoClose.
SP.UI.ModalDialog.showWaitScreenWithNoClose(title, message, height, width);

Demo
SP.UI.ModalDialog.showWaitScreenWithNoClose(SP.Res.dialogLoading15);
or
SP.UI.ModalDialog.showWaitScreenWithNoClose('Loading Title', 'Loading Message Here...');


Case Five (Open Modal Dialog in ECB Menu)
t if you want to open dialog from ECB menu? Create new custom action in Element.xml file and in UrlAction tag use the following javascript function.

<Elements xmlns="http://schemas.microsoft.com/sharepoint/"> 
    <CustomAction
        Id="{B0B5A0CB-7FBE-4dd6-9B2A-2B1E1321B8F9}"
        RegistrationType="List"
        RegistrationId="101"
        Location="EditControlBlock"
        Title="Goto My Blog">     
        <UrlAction Url="javascript: function onClose(){ }
          var o = {
            url: 'http://www.google.com ',
            title: 'MyBlog',
            allowMaximize: true,
            showClose: true,
            width: 700,
            height: 500,
            dialogReturnValueCallback: onClose
          };
          SP.UI.ModalDialog.showModalDialog(o);"/>
    </CustomAction> 
</Elements>


Labels:

91 comments

Unknown mod
January 6, 2016 at 2:12 AM
This comment has been removed by the author.
Melbourne Web Developer mod
April 26, 2017 at 2:00 AM

Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!

Reply
Anishi Ganatra mod
May 3, 2017 at 11:37 PM

Wonderful post and thanks for sharing about how to create a pop-up dialog in sharePoint, You are also provide step by step installation process here. Since I am an embedded system design service provider and like to forward with my team members. I am sure in this informative post is useful for them.

Reply
Peter mod
August 16, 2017 at 2:14 PM

This is the best basic tutorial on modal dialogs that I have seen. Thanks!
I have a question about the second example in your second case (the one using ShowWelcomeDialog). I am able to edit the pop-up text, but I would like to incorporate some basic html (like bold and ordered lists) into the pop-up text, but adding html to the createTextNode breaks the modal.
Is there a way to display this in a modal dialog?

Reply
sanpiseth40 mod
September 4, 2017 at 10:18 AM

i really likes your blog and You have shared the whole concept really well. and Very beautifully soulful read! thanks for sharing.
ตารางคะแนน

Reply
Unknown mod
November 23, 2017 at 9:49 PM

The flawlessly organized web pages and applications that you use on the Internet. Outlining web pages and giving usefulness through them is a workmanship and on the off chance that you are wanting to join this craftsmanship troupe. Step by step instructions to Become a Web Developer

Reply
Unknown mod
January 22, 2018 at 4:04 PM

How do I do this in SharePoint online, on a page where I don't have an option to open the classic experience and there is no ribbon with an Insert tab?

Reply
daud shad mod
July 12, 2018 at 11:50 AM

On the off chance that these are your reasons and you are not seeming to be an aggressive competitor, you just don't need to spend a fortune on Triathlon Swimsuit. Be that as it may, on the off chance that you would like to be aggressive, you should spend more cash than if you are doing it only for entertainment only. Best Triathlon Suit Online

Reply
quotes4home mod
June 18, 2019 at 1:38 AM


Online shopping in Pakistan is being delighted by ishop.global for original brands as there is no other name reliable We have the huge range of products for you to shop online from USA to Pakistan All genuine brand smartphones, appliances, fashion clothing and apparel, games, laptops and much more along fastest delivery across Pakistan https://ishop.global/

online shopping
online shopping in pakistan
amazon online shopping
amazon online shopping in pakistan
amazon pakistan

Reply
hollywoodmovies mod
June 19, 2019 at 4:35 AM

Global Shopaholics is a Package forwarding company based in Delaware USA. We are proud to offer the cheapest International shipping rates from the USA to anywhere in the world to your Doorstep. Global Shopaholics core value is based on excellent customer experience while shopping internationally. Our main goal is to make international shopping shipping experience smooth, economical and easy. For more information keep visiting our website: globalshopaholics.com

shop and ship
myus
viabox

Reply
Tahir Saleem mod
June 30, 2019 at 2:45 AM

At smartcityprestige Chauffeur Hire, our vehicles can be hired for any purpose - from airport transfers to prom-nights, special celebrations to wedding cars. We can even provide cars for photo shoots and promotional events. Whatever your requirement, we have the chauffeurs and cars to suit your budget: Get a Quite Visit our website: https://www.smartcityprestige.com/
Luxury wedding car hire london

Reply
Tahir Saleem mod
July 6, 2019 at 11:27 AM

Chauffeur service London, offering executive chauffeur driven car hire services London's largest executive company. Be ready to expect more Services Chauffeur service specializing in London.
Luxury Chauffeur Services
E Class Chauffeur
Mercedes S Class Chauffeur
Luxury Car Hire

Reply
Bushraah88 mod
August 8, 2019 at 5:55 AM

Great Article.Thanks for sharing .I have been searching for such an informative post since many days and it seems my search jst ended here.Good work.Keep posting.www.bexteranutrition.com
www.digital marketingfront.com
One Machine Learning
One data science
designing info.in

Reply
Kenneth P Lewis mod
August 21, 2019 at 9:11 PM

this is very informative and interesting for those who are interested in blogging field.
Free code generator at google play gift card code generator

Reply
peter thakur mod
January 20, 2020 at 3:17 AM

Nice blog and grateful information to who are visiting these pages. I would like to appreciate all your efforts, I have used many other services several times and I am very happy with it too. Finally once more thank you for this breathtaking article and I like this.if you have interest please visit us: Google Play Generator

Reply
C7YPT0N mod
May 21, 2020 at 2:07 PM

love this post. but you want to know about pakistan visit here.

https://wrecklessly.blog

you can know many thing about wrechlessly.blog

Reply
Stewart Taufel mod
June 30, 2020 at 3:01 AM

This article was exceptional and informative. I want to personally thank you for clearing all my misunderstandings regarding imaging center billing services. I will share this article with my partners who deal with the website regarding this aspect.
Want to learn more about our website? Visit the link
https://medcaremso.com/imaging-center-billing-services/

Reply
security companies in london mod
July 10, 2020 at 10:59 PM

Thanks for this post. It proves very informative for me. Great post to read. Keep blogging.

If you are looking for the top security companies in London that provide its customer with remarkable security services. Check out this site for security services and cctvinstallation London

Reply
ABC STRUCTURES4U mod
July 14, 2020 at 6:30 AM

loft conversion semi-detached house is to insert rooftop light windows without making any outside modifications to your roofline. It works best when there is adequate headroom all through your space so you can use all the accessible floor space.

Reply
TONI TOHID mod
July 27, 2020 at 11:00 AM

Thank you for your nice post WE are very happy to gate it we hope that you will publish more Business card template

Reply
Dipusparsho mod
August 6, 2020 at 2:11 PM

Really!! great posting for us. Thanks to you for the good posting. More details
scholarship for business administration


Reply
chumsrubbish mod
August 15, 2020 at 12:06 AM

Thanks for this post. It proves very informative for me. Great post to read. Keep blogging.

If you are looking for the top security companies in London that provide its customer with remarkable security services. Check out this site for security services and rubbish clearance london

Reply
abcsturctruse4u mod
August 17, 2020 at 6:11 AM
This comment has been removed by the author.
Joker Slot 303 mod
September 2, 2020 at 3:47 PM

Joker123 Online Game Most Popular in the World Smart Phone gaming For that, for those who are interested in cheap online deposit slots, here is the place

Joker123
Agen Joker123
Situs Joker123
Joker123 Deposit Pulsa

Reply
abcsturctruse4u mod
September 14, 2020 at 5:02 AM

It's really a nice and useful piece of information. I am satisfied that you shared this helpful info with us. Please stay us up to date like this. Thanks for sharing.

Working to client specification, we build house extensions of any size from start to finish, including groundwork, brickwork, electrical installation, plumbing, plastering and decorating. We will source pre-used bricks and tiles to match existing and replace supporting walls with Rolled Steel Joists where necessary. Visit our site for Garden Waste Wand worth

Reply
London Construct Ltd mod
September 18, 2020 at 3:38 AM

It's really a nice and useful piece of information. I am satisfied that you shared this helpful info with us. Please stay us up to date like this. Thanks for sharing.

London construct Ltd is a building and construction company in London, covering all London areas based in South East London.Our friendly and personable approach ensures that every step of your project is completed thoroughly and with care, please contact us for free Plumbing And Heating Companies.

Reply
MAKSIM ALEK mod
September 21, 2020 at 7:33 AM

I think you have a great article here, But let me share with you all here about my experience with a loan lender called Benjamin Lee who helped me expand my business with his loan company that offered me a loan amount of 600,000.00 USD which I used to upgrade my business months ago. He was really awesome working with him because he a Gentle man with a good heart, a man who can listen to your heart beat and tell you that everything will be OK, when I contacted Mr lee it was on my Facebook page that his advert came up then I visited his office at Michigan to discuss about the loan offer that he and his company render, He makes me understand how all process go then I decided to give a try to it was successful just like he promised, yeah I believe him, I trust him, I rely on him as well about all my project he will be my dear financial officer and I'm glad my business is probably going well and I'm going makes my business growth like grass with his help.he work's with a great investors and guess what? They also give international loans. Is that not awesome to hear when you know a lot of business project are growing up each day by day in your heart hoping that you going to make income of that job to raise money for the project, Ops, then Mr Lee will help you with that, Yes international loan he will help you with that perfectly because I trust him very much for that kind of job, Look don't be shy or shaded give a possible try to Mr lee here his contact : 247officedept@gmail.com

Reply
Steve mod
September 30, 2020 at 3:37 AM
This comment has been removed by the author.
Dipusparsho mod
October 12, 2020 at 7:26 AM

That is a good blog site. Nice posting.
You can visit the website for free online chat rooms.
Online Chat Rooms

Reply
Custom Packaging Solution mod
October 12, 2020 at 9:34 AM
This comment has been removed by the author.
Custom Packaging Solution mod
October 13, 2020 at 7:49 AM
This comment has been removed by the author.
John mod
October 16, 2020 at 12:02 AM

Very Nice Post Thanks For Sharing Useful Information With Us
security agency

Reply
Shariful mod
October 28, 2020 at 5:12 AM

Excellent Movies & TV Series Watch Online. ➤No ADs ➤All Years ➤All Genres ➤Totally Free https://real-123movies.best/last-added

Reply
Custom Packaging Solution mod
November 2, 2020 at 6:18 AM
This comment has been removed by the author.
Custom Packaging Solution mod
November 3, 2020 at 5:59 AM
This comment has been removed by the author.
Dipusparsho mod
November 9, 2020 at 9:48 AM

Your blog site is excellent. It's a InnerBrokers that is a good for trading. Every join with InnerBrokers and Enjoy it.

Visit the website InnerBrokers

Reply
Custom Packaging Solution mod
November 10, 2020 at 7:55 AM
This comment has been removed by the author.
Custom Packaging Solution mod
November 11, 2020 at 9:57 AM
This comment has been removed by the author.
Custom Packaging Solution mod
November 19, 2020 at 8:48 AM
This comment has been removed by the author.
Custom Packaging Solution mod
November 21, 2020 at 10:43 PM
This comment has been removed by the author.
Chris Michael mod
November 23, 2020 at 8:19 AM
This comment has been removed by the author.
Chris Michael mod
November 30, 2020 at 7:19 AM
This comment has been removed by the author.
Custom Packaging Solution mod
November 30, 2020 at 7:31 AM
This comment has been removed by the author.
Chris Michael mod
December 3, 2020 at 4:21 AM
This comment has been removed by the author.
Chris Michael mod
December 5, 2020 at 4:36 AM
This comment has been removed by the author.
Custom Packaging Solution mod
December 5, 2020 at 4:56 AM
This comment has been removed by the author.
Noah liam mod
December 7, 2020 at 5:04 AM

I think that informational articles should be more like yours. By that I mean they should have character. Your article had character and is persuasive. Your views are very interesting. Custom Cigarette Packaging

Reply
Custom Packaging Solution mod
December 8, 2020 at 3:15 AM


Nice post. For more info about Custom sleeves cigarette boxes enjoying a lot while reading this beautiful article.

Reply
Chris Michael mod
December 12, 2020 at 5:18 AM
This comment has been removed by the author.
Boxesme mod
January 1, 2021 at 5:38 AM

Thanks for sharing this informative article. For more info about box sleeve printing very beautiful article nice use of pics.

Reply
Chris Michael mod
April 5, 2021 at 4:11 AM
This comment has been removed by the author.
BoxesMe mod
April 12, 2021 at 10:59 AM
This comment has been removed by the author.
Custom Packaging Boxes mod
April 17, 2021 at 1:03 PM
This comment has been removed by the author.
Steve mod
May 21, 2021 at 4:20 AM
This comment has been removed by the author.
Steve mod
May 26, 2021 at 2:38 AM
This comment has been removed by the author.
Henry mod
June 21, 2021 at 10:31 AM

Factura duplicada de TESCO en línea
Tesco es una empresa de suministro de energía de confianza en el área. En las áreas tribales operadas por WAPDA, TESCO Supply Company suministra electricidad y servicios a otras áreas circundantes. Tesco ofrece una gama de servicios a sus clientes. Uno de los mejores servicios es la facturación online.

pesco bill
sngpl bill
sepco online bill
pesco online bill
iesco online bill

Reply
Custom Printing Solution USA mod
August 24, 2021 at 4:53 AM
This comment has been removed by the author.
Lucas mod
October 18, 2021 at 7:34 AM

Jeg finder denne pleace på tripadvisor, og jeg beklager take away amager ikke. Gnocchi var så så lækker, gorgonzola var den bedste beslutning med blå ost.
Hvis du lytter til mig, spiser der en Gnocchi.

Reply
custompackagingexpert mod
November 18, 2021 at 12:24 PM


You can get help with any assignments: from easy-breezy to impossible.writemyessayplz Just reach out to our pro writers with a “write a paper for me” request, and they’ll get it done!

Reply
Olivia Emma mod
November 24, 2021 at 1:25 AM



"thành cổ rộng sao đồng đội tôi nằm chật" nêu biện pháp tu từ và nêu cách question hub hiểu của em? tại sao tác giả lại viết " Nhẹ bước chân và nói khẽ thôi"?

Reply
Anonymous mod
July 6, 2022 at 12:53 PM

https://sharepointpowerpopups.com/

Power Popups for SharePoint is the most effective way to communicate your message and ensure it gets the required attention from your users. With Power Popups you can create Popups that display any content. Choose to add the Popup Content from a Page URL, HTML or Rich Text.

Use Power Popups for alerts, banners, forms, news items, documents, galleries, redirects on close and any element. Display your Popup content more effectively and with style.

Power Popups is the SPFx Webpart that comes with a wide range of available options, that let’s you create combinations of Popups and achieve eye catching effects for your messages easily and without any special coding knowledge.

Reply
CarCapital mod
December 6, 2022 at 10:51 AM

Hi There! I really like your blog and your blog is very informative and knowledgeable thankyou for sharing this type of content


Reply
DriveSwitch mod
December 16, 2022 at 8:14 AM

We like your blogs very much. Your blogs are very useful. Thank you
Please increase your knowledge to expand our website here is our website link ..... https://drive-switch.yolasite.com/
We like your blogs very much. Your blogs are very useful. Thank you
Please increase your knowledge to expand our website here is our website link .....

Reply
highlineconstruction mod
January 2, 2023 at 9:53 AM

What a lovely post I like it . its is very useful for us

Reply
National Chauffeur mod
March 6, 2023 at 10:47 AM

What a lovely post I like it . its is very useful for us
This is our service.

Reply
Kratom Point mod
June 22, 2023 at 1:14 AM

Experience the natural power of Grass Roots Kratom with Kratom Point. Elevate your well-being and discover the authentic benefits of our premium Kratom products today.

Reply
Mahir Company mod
August 20, 2023 at 11:50 PM

Buy Kratom Amazing Botanicals like our premium strains from Kats Botanicals. Crafted for amazing quality you can trust.

Reply
Stardust7264Y mod
October 27, 2023 at 8:12 PM

href="https://istanbulolala.biz/">https://istanbulolala.biz/
30İE

Reply

Post a Comment