Simple Pop-up: Fuel
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')">
<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>
In your query you spec the following:
Select all from the Products table where itemID=#url.memberID#
Is memberID from your authenticated session?
I like the simplicity and functionality.
I have not tested yet, how does this respond with Popup blockers and how about positioning, does the new window have focus?
I posted a light-weight alternative using tooltip popups with just html and CSS at http://dougr.net/index.cfm/2006/12/31/Plain-Old-HT....
This is not a replacement for what you are doing, but if you just need some rollover information that can be styled it works really nice.
D.
cfquery name="getDetail" datasource="#Application.DSN#">
Select *
from Products
where itemID = #url.itemID#
</cfquery>
Yes the new window should have focus.. I've not had any trouble with pop-up blockers so far.. The built ins--- (IE and FireFox) seem to ignor it as do Google toolbar and Yahoo Toolbar.. I've not tested it with a "bought" blocker.
<a href="javascript:pop('product-detail.cfm?itemID=5')"><img src="itemID5.gif" alt="The best Fuel Available (-;" /><span>My Popup Content</span></a>.
What do you think?
D.