By Andy Stephenson
September 2012
In this tutorial we demonstrate how to make any page, any piece of content or any single module from anywhere on our site appear in a modal pop-up by simply creating a hyperlink.
If you've even the smallest experience with Dotnetnuke 6 you should have seen these pop-ups in action already, they are used when we edit content or settings throughout a DNN6 site.
I'm going to walk you through first how to make an entire page pop up which will include all modules on the selected page.
We'll then move on and show you how to select an individual module to pop up, such as a single HTML module or a survey module.
Finally we'll look at how we can change the pop-up dimensions and we'll walk through the remaining features such as redirection after closing the pop-up window.
Video Contents:
Video 1 - Creating a Whole Page Pop-up, Creating a Single HTML Module Pop-up Introduction
- Introduction
- How to build the initial hyperlink
- Creating the hyperlink ‘onclick’ event
- How to use dnnModal.show
- Adding the pop-up source url
- How to use the popUp=true querystring parameter to remove the page skin
- Introduction to the popUp skin
- Pop-up arguments or settings
- Setting the pop-up dimensions
- Setting the href attribute for javascript disabled browsers
- How to create a pop-up containg a single HTML module
- How to resize the pop-up
Video Duration: 11min 18sec
Video 2 - How to Create a Survey Module Pop-up and a Contact Form Pop-up
- How to find the Tab ID and Module ID properties for a survey module
- Specifying the Tab ID and Module ID properties
- Creating a contact form pop-up
- How to redirect to another page after the pop-up is closed
Video Duration: 5min 52sec