✔ Auserhalb von Box Hintergrund grau

h4dhunTer

h4dhunTer

Erfahrenes Mitglied
Hallo,
ich habe eine DIV Box + Javascript.

index.html
HTML: 
<script type='text/javascript'>
function initAd(){
document.getElementById("sendeinfo").style.display="block";
}
function closeAd(){
document.getElementById("sendeinfo").style.display="none";
}
window.setTimeout('initAd()',1000);
</script>
<div id="sendeinfo">
<div class="sendbox">
INHALT
</div>
</div>

design.css
Code: 
.sendbox {
width: 530px;
height: 268px;
border: 1px solid #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
background-color: #ffffff; 
}
#sendeinfo {
    position:absolute;
    height:1;
    width:1;
    margin:-100px 0px 0px -200px;
    top: 50%;
    left: 50%;
}

Ich möchte nun, wenn das Fenster offen ist, dass der Rest der Seite etwas grau ist, aber man trotzdem noch ein bisschen was erkennen kann.

Muss ich das mit CSS machen, oder doch mit Javascript? Wenn es mit CSS geht, wie?
 
Hi,

erstelle ein weiteres absolut positioniertes DIV, das sich über den gesamten Anzeigebereich erstreckt. Weiterhin
wird es eine Ebene tiefer angeordnet als das sendeinfo-DIV (z-index). Jetzt erhält es noch die CSS-Eigenschaften
für die Transparenz (filter: alpha(...), -moz-opacity, opacity).

Das neu erstellte Element wird eingeblendet, wenn initAd ausgeführt wird und ausgeblendet bei closeAd.

Weiterhin sollten die Scrollbars ausgeblendet werden, während das DIV eingeblendet ist.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function initAd(){
  document.getElementById("sendeinfo").style.display="block";
  document.getElementById("greyDiv").style.display="block";
  document.getElementsByTagName("html")[0].style.overflow = "hidden";
  document.getElementsByTagName("body")[0].style.overflow = "hidden";
}

function closeAd(){
  document.getElementById("sendeinfo").style.display="none";
  document.getElementById("greyDiv").style.display="none";
  document.getElementsByTagName("html")[0].style.overflow = "auto";
  document.getElementsByTagName("body")[0].style.overflow = "auto";
}
window.onload = function(){
  initAd();
}
</script>
<style type="text/css">
  <!--
body{ margin: 0; padding: 0;}
.sendbox { width: 530px;
           height: 268px;
           border: 1px solid #000;
           font-family: Verdana, Arial, Helvetica, sans-serif;
           font-size: 11px;
           color: #333;
           background-color: #fff;}

#sendeinfo { position:absolute;
             height: 1px;
             width: 1px;
             margin: -100px 0px 0px -200px;
             top: 50%;
             left: 50%;
             z-index: 50;}

#greyDiv{ position: absolute;
          height: 100%;
          width: 100%;
          background: #aaa;
          filter:alpha(opacity=90);
          -moz-opacity: 0.9;
          opacity: 0.9;
          z-index: 49;}
 //-->
</style>
</head>
<body>
<div id="greyDiv">&nbsp;</div>
<h1>Hallo Welt</h1>
<p>Mit wenig Text ist das hier doch recht langweilig und wenig aussagekräftig.</p>
<p>Deshalb noch ein Absatz ...</p>
<p><button onclick="initAd();">initAd</button></p>
<div style="height: 1000px;">Höhendiv</div>
<div id="sendeinfo">
  <div class="sendbox">
    <br>
    <button onclick="closeAd();">closeAd</button>
  </div>
</div>
</body>
</html>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück