✔ Div über Layout legen

Status
Nicht offen für weitere Antworten.
M

mprehn

Grünschnabel
Hallo,

ich würde gerne bei einem klick auf einen Button einen Div über das komplette Layout legen, der schwarz ist und 80% Transparenz hat (blanked screen look)..

Meine Frage:
Wie legen ich einen Div über das komplette Layout?
Wenn ich das Layout verschachtel, macht er nur den Hintergrund schwarz..

Danke!
mprehn
 
Während ich das nachfolgende Beispiel erstellt habe, hat Markus ja schon einen passenden Link genannt ... sei's drum, doppelt hält besser ;)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}

div#blackBox {
z-index: 2;
position: absolute;
left: 50%;
margin-left: -250px;
width: 500px;
top: 50%;
margin-top: -250px;
height: 500px;
background: #000;
color: #fff;
filter: alpha(opacity=80); /* Für IE */
-moz-opacity: 0.80; /* Für Gecko-Browser */
visibility: hidden;
}

div#content {
z-index: 1;
position: absolute;
left: 50%;
margin-left: -200px;
width: 400px;
top: 50%;
margin-top: -200px;
height: 400px;
background: #dfdfdf;
color: #000;
}
-->
</style>

<script type="text/javascript">
<!--
function ShowHide(id) {
    obj = document.getElementsByTagName("div");
    if (obj[id].style.visibility == 'visible'){
    obj[id].style.visibility = 'hidden';
    }
    else {
    obj[id].style.visibility = 'visible';
    }
}
//-->
</script>

</head>
<body>

<div id="blackBox">
     <a href="#" onclick="ShowHide('blackBox')">Hide blackBox</a>
</div>

<div id="content">
     <h1>Content</h1>
     <a href="#" onclick="ShowHide('blackBox')">Show blackBox</a>
</div>

</body>
</html>
 
Hey..
genau sowas hatte ich vor, nur halt nicht in Flash..
Hab's mittlerweile auch hinbekommen, hatte nur einen Denkfehler (falsch verschachtelte DIVs)
Trozdem danke für eure Hilfe:)

PS: Mit Java läufts wesentlich schneller, es gibt zwar keine tollen Animationen und Tweens, aber ich brauche für ein Bild nur einen Bruchteil der Load-Zeit..

Gruß
 
Das läuft alles über Javascript. Hier mal ein Auszug aus dem Script-Code der effect.js:

Transparenz-Effekt:
Code: 
Element.getOpacity = function(element){
  var opacity;
  if (opacity = Element.getStyle(element, 'opacity'))
    return parseFloat(opacity);
  if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/))
    if(opacity[1]) return parseFloat(opacity[1]) / 100;
  return 1.0;
}

Element.setOpacity = function(element, value){
  element= $(element);
  if (value == 1){
    Element.setStyle(element, { opacity:
      (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
      0.999999 : null });
    if(/MSIE/.test(navigator.userAgent))
      Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});
  } else {
    if(value < 0.00001) value = 0;
    Element.setStyle(element, {opacity: value});
    if(/MSIE/.test(navigator.userAgent))
     Element.setStyle(element,
       { filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
                 'alpha(opacity='+value*100+')' });
  }
}

Element.getInlineOpacity = function(element){
  return $(element).style.opacity || '';
}
Slide-Animation:
Code: 
Effect.SlideDown = function(element) {
  element = $(element);
  Element.cleanWhitespace(element);
  // SlideDown need to have the content of the element wrapped in a container element with fixed height!
  var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom');
  var elementDimensions = Element.getDimensions(element);
  return new Effect.Scale(element, 100, Object.extend({
    scaleContent: false,
    scaleX: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) { with(Element) {
      makePositioned(effect.element);
      makePositioned(effect.element.firstChild);
      if(window.opera) setStyle(effect.element, {top: ''});
      makeClipping(effect.element);
      setStyle(effect.element, {height: '0px'});
      show(element); }},
    afterUpdateInternal: function(effect) { with(Element) {
      setStyle(effect.element.firstChild, {bottom:
        (effect.dims[0] - effect.element.clientHeight) + 'px' }); }},
    afterFinishInternal: function(effect) { with(Element) {
      undoClipping(effect.element);
      undoPositioned(effect.element.firstChild);
      undoPositioned(effect.element);
      setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }}
    }, arguments[1] || {})
  );
}

Effect.SlideUp = function(element) {
  element = $(element);
  Element.cleanWhitespace(element);
  var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom');
  return new Effect.Scale(element, 0,
   Object.extend({ scaleContent: false,
    scaleX: false,
    scaleMode: 'box',
    scaleFrom: 100,
    restoreAfterFinish: true,
    beforeStartInternal: function(effect) { with(Element) {
      makePositioned(effect.element);
      makePositioned(effect.element.firstChild);
      if(window.opera) setStyle(effect.element, {top: ''});
      makeClipping(effect.element);
      show(element); }},
    afterUpdateInternal: function(effect) { with(Element) {
      setStyle(effect.element.firstChild, {bottom:
        (effect.dims[0] - effect.element.clientHeight) + 'px' }); }},
    afterFinishInternal: function(effect) { with(Element) {
        [hide, undoClipping].call(effect.element);
        undoPositioned(effect.element.firstChild);
        undoPositioned(effect.element);
        setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }}
   }, arguments[1] || {})
  );
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück