Guten Morgen
Ich möchte ein JS-Script machen, welches mir mit einem Auslöser ein Overlay generiert und ein Bild lädt. (ähnlich wie lightbox, nur einfacher)
mit einem kleinen Button soll das Overlay wieder verschwinden.
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.ausloeser {
position:relative;
background-color: #009900;
height: 30px;
width: 30px;
z-index:1;
}
.Box1 {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(transparent.png);
z-index:2;
}
.BoxHead {
position:absolute;
background-color:#FFFFFF;
width:800px;
left:20%;
right:20%;
top:40px;
z-index:3;
}
.BoxClose {
position:relative;
left:-20px;
background-image:url(close.jpg);
height:16px;
width:16px;
}
-->
</style>
<script type="text/javascript">
<!--
function bild(posImDOM)
{
var myDIV1 = document.createElement("DIV");
myDIV1.className="Box1";
myDIV1.id="Box";
var myDIV2 = document.createElement("DIV");
myDIV2.className="BoxHead";
var myDIV3 = document.createElement("DIV");
var newAttr = document.createAttribute("background");
newAttr.nodeValue = "body.jpg"
myDIV2.setAttributeNode(newAttr);
var newAttr1 = document.createAttribute("onClick");
newAttr1.nodeValue = "wegMitEintrag()"
myDIV3.setAttributeNode(newAttr1);
myDIV3.className="BoxClose";
myDIV2.appendChild(myDIV3);
myDIV1.appendChild(myDIV2);
document.body.insertBefore(myDIV1, posImDOM);
}
function wegMitEintrag() {
var Knoten = document.getElementById("Box")[0].firstChild;
verschwunden = document.removeChild(Knoten);
alert(verschwunden.firstChild.nodeValue)
}
//-->
</script>
</head>
<body>
<div class="ausloeser" onclick="bild(this)"></div>
</body>
</html>Die Div's legt es eigentlich ordentlich an, die Attribute werden auch korrekt eingefügt. Allerdings wird das bild (als background eingefügt) irgendwie ignoriert.
Wie ich das Overlay wieder verschwinden lassen kann, habe ich noch keinen guten Ansatz. Kann mir jemand helfen?
Vielen Dank!