Web application interfaces are becaming more and more advanced and we see modal dialogs in many popular websites. One of the best social bookmarking site Digg uses modal popup for log In. As a developer, when you want to implement modal popups, you should know abcs of it. I've written an article about creating a simple modal popup in HTML4 after learning some basics of html, css and javascript. After almost a month, I was looking at the search keywords and dotnetnuke forums, and I have come to know that users want to implement modal popup in dotnetnuke also. So I just thought it would help to just guide those users.
Which Doctype are you using?
Well If you are using dotnetnuke 4.x and want to implement modal popup, first thing you should check is, which doctype your sking is using. If you don't know that, its really simple to know that. Just run your application in browser, and from View > View Source look at the very first line of browser source, it must be showing a doctype tag.
Implement in HTML4
Once you know the doctype tag, if you are using HTML4 doctype, then you can use my previous article which shows how you can create modal popup in HTML4. That article focus on javascript and css code to implement a simple modal popup dialog in your web application. You can change that modal background color and design your own popup design using that. The javascript code can be used as it is except you need to change the control ids according to your code if you are not using same ids as i have used in my html code give in that article.
Implement in XHTML
If you are using XHTML strict or transitional doctype then you can Ajax Control Toolkit's modal popup extender control. If you want to use ajax control toolkit controls in dotnetnuke, you have to learn how to do that, and this article can help you to quickly get familiar with that.
Implement using jQuery
Another way to implement modal popup in dotnetnuke for XHTML doctype is to use jQuery. You can easily get a modal popup plugin written in jQuery which you can use in dotnetnuke also. Here is an example to get it from google search.
If you are having problems referencing jQuery js and other js files, you can use ModulePath and SkinPath variables, to help browsers find right path in dotnetnuke application. If you are adding jQuery at module level and you have placed the jquery js and plugin js in module's directory, then used prefix like following to make sure browser will get the js properly.
<script src="<%=ModulePath%>jquery.js" type="text/javascript" />
and in same way if you using jquery at skin level then you can use SkinPath variable.
Hope you enjoyed the summary about creating a modal popup in dotnetnuke. Please write me your feedback if you need code along with this.
Happy coding :)
I'd love to see code for a JQuery popup implementation that returns a value after a user makes a selection in the pop up. Do you have that available?
ReplyDeleteHi Richard,
ReplyDeleteI don't have such code handy but I think that is easily possible using jQuery ui dialog plugin, take a look at example on that site.