Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts

    Getting background to 'fade' while popup is displayed

    How would I go about doing this? I'd like to create a "pop up effect", where a div "pops up" and its opacity is 1 while the background is transparent. If I do document.body.style = '0.1'; it makes everything including the div transparent. I've also tried document.getElementById('popup').style.opacity = '1.0'; in addition to setting the body's style but to no avail.
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #2
    New Coder
    Join Date
    Nov 2010
    Location
    i live online.
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    what happens when you do it with an id then? you said it didnt work but didnt specify...

    either way, try it using JQuery, JQuery always ends up fixing my thoughts on this... and actually to be more specific: JQuery-UI...

    the example id prolly end up using is as follows:
    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>highlight demo</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
      <style>
      #toggle {
        width: 100px;
        height: 100px;
        background: #ccc;
      }
      </style>
      <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
      <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    </head>
    <body>
     
    <p>Click anywhere to toggle the box.</p>
    <div id="toggle"></div>
     
    <script>
    $( document ).click(function() {
      $( "#toggle" ).toggle( "highlight" );
    });
    </script>
     
    </body>
    </html>
    this was found here: http://api.jqueryui.com/highlight-effect/

    instead of changing its transparency, change its color, just a thought..

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,195
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Easy.
    Code:
    <body>
    <div id="popon" style="position: absolute; display: none;">
    you will put your popon contents here
    you can position it with JS (or in the style) and then change to display: block
    </div>
    <div id="content">
    all the rest of the page content goes in here
    and *THIS* is the element whose opacity you change
    </div>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    Thanks, I was missing the second div.
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •