Using dnnModal.show in your modules and content

One 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 looks like the following

<a href="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)">Link Here</a>

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.