Skip to main content
W
WestSide
Inspiring
August 18, 2008
Question

Darken CF8 and MODAL Window??

  • August 18, 2008
  • 1 reply
  • 381 views
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,

    This topic has been closed for replies.

    1 reply

    davidsimms
    davidsimms
    Inspiring
    August 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
    W
    WestSideAuthor
    Inspiring
    August 20, 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
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices