Products

Solutions

Resources

Partners

Community

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Using dnnModal.show in your modules and content

imageOne thing that was added in DotNetNuke 6 but hasn’t been covered in great detail is a method called dnnModal.show. Calling this method is fairly straight forward depending on your need, but before we get into how to call/use the method, let’s talk about what it does first.

dnnModal.show is a method that gets called via JavaScript and allows you to load up a URL into a modal popup window within your DotNetNuke site. Basically it will take that URL and load it into an IFrame within the current DotNetNuke page.

Want to see dnnModal.show in action? When logged into an existing DotNetNuke 6(+) installation, mouse over the MANAGE button for the module and click on the SETTINGS link, that will take you to the Module Settings for that module, and will most likely load up in a Modal window. If it doesn’t, you likely have turned off Modal options in the Admin/Site Settings page.

Now, how about calling the thing?

If you manually wanted to build a link using the dnnModal.show method you would create a link that has the following in the HREF attribute

javascript:dnnModal.show('http://www.chrishammond.com/blog/itemid/2564/how-to-use-the-netduino-go-piezo-buzzer-module.aspx?popUp=true',false,550,950,false)"

Where the arguments are as follows.

  1. The first argument passed to show() is the URL you want to load. You’ll notice I am simply calling a DNN Url with a querystring parameter of popUp=true. That last parameter tells DNN to load the popup skin, which ultimately is a blank skin that has a single ContentPane, all modules from the requested page are loaded into that single pane. You don’t have to call a DNN url, but if you do, you likely want to include the popUp=true to remove the navigation, logo, and other common skin elements. I will do another blog post soon about the popup skin functionality for DNN.
  2. The next argument is if the window should show the Return button at the bottom, in most cases this would be false.
  3. The next option is height of the window, this example would be 550 pixels
  4. The next option is width of the window, this example would be 950 pixels
  5. The next argument is another true/false, this one defines whether the parent page (the page the iframe/window is loaded on top of) should be refreshed after the modal window closes. For example, you would want the page to refresh if the modal window was editing the contents of the parent page, but perhaps not for other reasons.
  6. While I am not using a 6th argument, you can pass in an additional URL, this URL will be called when the window closes, so if you want to redirect someone to another URL after closing the modal window, you would pass in another URL. This argument will only work when argument 5 is true, otherwise the redirect will not occur when the window closes.

One thing to keep in mind though, this code will only work when you have popups enabled in the Site Settings for a portal. Otherwise clicking on the link will do nothing.

So now that you know about dnnmodal.Show, what if you want to let DNN create the links for you? Well there are methods for that.

In the UrlUtils class (DotNetNuke.Common.Utilities.UrlUtils) there is a method called PopUpUrl, with a number of different signatures on it.

Comments

Stefan de Groot
Thanks a lot Chris, just what I was looking for!
Stefan de Groot Saturday, July 20, 2013 4:58 AM (link)
Allen Battles
Is there a built in method to return a value from a popup to the parent page?
Allen Battles Thursday, August 29, 2013 3:46 PM (link)
Chris Hammond
Allen, not that I know of
Chris Hammond Thursday, August 29, 2013 4:07 PM (link)
Matt Prose
How can I define the top value for the iframe and or have it load at the top of the page?
Matt Prose Thursday, November 21, 2013 1:03 PM (link)
Ted
Hey Chris. Great article and hope you are well. Having an issue ... this above seems to work great for me in all browsers except IE (11 and back). If IE clicking the anchor to open the modal results in a page change and the new page has nothing in it except the single word "false". Any thoughts?

I can give you the URL in a private message if that helps.

Best,

Ted
Ted Thursday, February 6, 2014 11:25 PM (link)
Chris Hammond
Ted, sorry, this blog post is from 2012, I haven't touched the Modal controls since then
Chris Hammond Friday, February 7, 2014 8:50 AM (link)
Ted
No problem Chris. Thanks for taking the time to comment. After copious playing with it last night and this morning I ended up figuring it out. Here's what I found out in case anyone else runs across this issue. Just to recap the above method was working in Chrome, FireFox, and Safari but not in IE 11 (and any of it's compatibility modes) and seemed specific to DNN7. The I was using was in this form:

Terms

When I changed it to the following, it magically started working in IE 11 as well as the other browsers mentioned above.

Terms

Happy coding everyone!

Best,

Ted Krapf
Ted Friday, February 7, 2014 9:56 AM (link)
Todd S
The width and height settings seem to have no effect on the width and height of the modal window. I've changed them and completely removed them and no change.
Todd S Monday, September 29, 2014 6:53 PM (link)
Jaydeep Bhatt
The dnnModal.show does not show the "Return" button, in-spite of making 2nd Item 'true'
Please help http://www.dnnsoftware.com/forums/forumid/199/threadid/513844/scope/posts
Jaydeep Bhatt Thursday, January 15, 2015 2:10 PM (link)
Mark Buelsing
If you are interested in influencing the css of the modal pop-up, view this additional community post.
http://www.dnnsoftware.com/answers/dnnmodal-title
Mark Buelsing Monday, July 20, 2015 12:15 PM (link)
Dong Liu
In DNN 6.0.1, in which file dnnModal.show exists? It throws me an exception in run time but I could not find where this function was called in the install version and the full source codes.
Dong Liu Thursday, February 25, 2016 12:51 AM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out