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.
Tags
:
Ajax,
popup