Darken CF8 and MODAL Window??

Report · Aug 18, 2008

Hi,

Is there anyway to change the overlay of a the background when I create a cfwindow? Right now when I set modal:true in the config it works fine, but I would like the background to be more dimmed/darkened to make the cfwindow/popup stand out a bit more. I frequently see sites with modal functionality and personally I think it looks better when the background of the page is a bit darker.

Any idea on how can I do this if at all?

Thanks,

Report · Aug 19, 2008

WestSide, I think what you're trying to do is create a lightbox effect. Look at www.dcbar.org/lightbox.cfm. There are several parts that make the effect work on that page.

1. The embedded style sheet in the <HEAD> of the document.

2. The link which triggers the lightbox to open:

<a href="javascript:void(0)"
onclick="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'">Show the lightbox.</a>

3. The division on the page which contains lightbox content. One thing I like about this solution is that it accepts anything as lightbox content (a claim not all solutions can make):

<div id="light" class="white_content">
<form action="lightbox.cfm" method="post">
<table align="center">
<tr><td align="right">Username: </td><td><input name="username" type="text"></td></tr>
<tr><td align="right">Password:</td><td><input name="password" type="text"></td></tr>
<tr><td></td><td><input name="submit" type="submit" value="Submit"></td></tr>
</table>
</form>

<a href="javascript:void(0)"
onclick = "document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'">Close</a>
</div>

4. Finally the division on the page that creates the translucent layer which makes the background appear to be inactive. One special note about this part. Make sure it's not nested inside a table or IE won't behave.

<div id="fade" class="black_overlay"></div>

I hope that's what you're after.

David

Report · Aug 19, 2008

Hi,

Thanks for the response. The functionality is already built into CF8. You can use the <cfwindow> tag or you can create the window from within a <script type="javascript"> block using syntax like "ColdFusion.Window.create()" I believe. My problem is not getting the effect, I am looking to just darken the background. Your post does essentially what the out of the box CF code (cfwindow) does which is fine but I am trying to find a way to darken the background to make the page appear more illuminated. Here is an example that is a bit darker.

http://javascript.about.com/library/blmodald1.htm

Click the hyper link halfway down the page.

Thanks,

-ws