Ajax modal popup

Quite often a modal popup is needed, a capability that modern browser lack out of the box. Though most Ajax frameworks bring this simple functionality, bringing in such a framework is a big investment for this functionality only. Therefore here an out-of-the-box solution for this that shows an SDL Tridion dynamic component in a modal popup. This solution works in any JSP container. I also have this available for .Net or ASP customers/prospects for those interested.

How to implement

  • Extract the attached zip file under �C:\VisitorsWeb\www.salesdemo.com\include� on your PE. (also under any other language site where you want this) 
  • Add the script include towards the communicator.js file:  
  • Add the html below somewhere in your HTML design (anywhere, e.g. directly after the opening tag):    

                <div id="modaldisplay" style="position:absolute;top:100px;width:300;height:400;display:none;background-color:white;"> 

                                <table style="border:1px solid black;height:100%;width:100%;overflow:auto;"> 

                                                <tr style="height:20px;"> 

                                                                <td> 

<img src="/include/communicator/close.png" style="float:right;cursor:hand;" onclick="document.getElementById('modaldisplay').style.display='none';"/> 

</td> 

                                                </tr> 

                                                <tr valign="top"> 

                                                                <td id="modalcontent"/> 

                                                </tr> 

                                </table> 

                </div> 

How to use

  • Create an anchor, and call the javascript function �ShowModalContent� as the href. <a href="javascript:ShowModalContent('tcm:37-1968');">Show Custom Content</a>
  • Pass the URI of the Dynamic Component to display in the modal popup     

Note: You can use this on any JSP website. If you change the location where you extract the file, then need to update the communicator.js file to point to the correct location. 


Developer
Company
:    Amakozi
License agreement
Download package
Tags
:    Ajax,  popup
Version
:   1.0
Source
:   Yes

About the Author
Hendrik Tredoux
CTO & CMO

Hendrik Tredoux worked for SDL Tridion in Amsterdam for seven years prior to co-founding Amakozi Technologies, and was instrumental in the development of the original SDL Tridion WCM product.

Amakozi Technologies

Most Popular Building Blocks

These are the most popular Building Blocks. Did you already get them?