Weird title, huh?! Well, last time I showed you all the code I like to use for Simple pop-up Windows. Really simple and easy to use.
This window is useful when you are displaying product details, Biographical details etc. Really, anytime you are returning a list and you want to save space on the main page.
To Fuel this window you need to start with the main page of info. For example, we have these products listed on our page:
Lets pretend that we want the user to be able to click these images to get more information or price. When we create those images we need our link to pass some product specific info to our pop-up page.. Item number for example. So the link from these images would look something like this:
<a href=”javascript:pop(’product-detail.cfm?itemID=5′)”>
Ok, great. We’ve got the info in place to call the page. Now, we just need to create one “detail” page for all the products to use. Just create a new ‘cfm’ document with the following:
<cfquery name=”getDetail” datasource=”#Application.DSN#”>
Select *
from Products
where itemID = #url.itemID#
</cfquery><html>
<head><cfoutput>
<title>#getDetail.itemName# made by #getDetail.itemManufacturer#
</title>
</cfoutput></head>
<body>
<cfoutput query=”getDetail”>
<table width=”98%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td><img src=”images/#picture#” alt=”#itemNumber# #itemName# – #itmeManufacturer#” title=”#itemNumber# #itemName# – #itmeManufacturer#” border=”1″ align=”left”> <strong>#itemNumber# #itemName# – #itmeManufacturer#</strong>
<cfif Quantity LT “1″>- Currently out of stock</cfif><p class=”main”>#description#</p>
</td>
</tr>
</table></cfoutput>
<div align=”center” class=”main”><a HREF=”javascript:void(0);” onClick=”window.close(’profile’);”>
Close Window </a></div></body>
</html>
And that is it.. Just pass the item number in the hyperlink to this page and the initial query will pull the item detail. This is pretty quick and dirty and there are probably better ways to do this but, this will give you a starting point.
Notice the bit of javascript at the bottoom:
<a HREF=”javascript:void(0);” onClick=”window.close(’profile’);”>
Close Window </a>
That will give you a close window link.
© 2007 – 2009, Robert Owen. All rights reserved.
