Getting background to 'fade' while popup is displayed

elitis · 02-08-2013, 05:59 AM

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.

boyo1991 · 02-08-2013, 06:30 AM

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..

Old Pedant · 02-08-2013, 06:51 AM

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>

elitis · 02-08-2013, 07:29 AM

Thanks, I was missing the second div.