Liebe Experten!
Ich habe ein Javascript, um eine Dialogbox zu öffnen (in meinem Fall sind es Bilder). Für das erste Bild habe ich alles nach meinen Vorstellungen eingestellt und es passt perfekt. Klicke ich nun auf ein 2. oder 3. Bild habe ich keine Reaktion. Als Java-Nichtexperte suche ich Eure Hilfe! Schönen Dank im Voraus!
Link zu meiner Testdatei: <a href="http://ibra.at/brita/shop/index.php">www.ibra.at/brita/shop/index.php </a>
Code
<script src="/js_webseite/jquery.js"></script>
<style>
@charset "ISO-8859-1";
h1 {
color: #554444;
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-decoration: none;
}
h1:first-letter { font-size:24px; color:#889977 }
h2 {
color: #554444;
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-decoration: none;
}
h3 {
color: #554444;
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-decoration: none;
}
h3:first-letter { font-size:24px; color:#554444 }
body {
margin-top: 5px;
margin-left: 5px;
background-color: #EEFFFF;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #554444;
}
p {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #554444;
}
.report_normal {
font-family: Rockwell, Verdana;
font-style: normal;
font-size: 15px;
font-weight: normal;
text-decoration: none;
text-align: justify;
color:#554444;
}
.report_gr {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 18px;
font-weight: bold;
text-decoration: underline;
color: #554444;
}
.report_ue {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
letter-spacing: 0.4em;
font-style: normal;
font-size: 26px;
font-weight: bold;
text-decoration: none;
color: #554444;
}
.sklein {
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 9px;
font-weight: normal;
text-decoration: none;
color: #554444;
}
.mtext {
font-family: Comic Sans MS;
font-style: normal;
font-size: 16px;
font-weight: normal;
text-decoration: none;
color: #000000;
}
.mtextklred {
font-family: Comic Sans MS;
font-style: normal;
font-size: 11px;
font-weight: bold;
text-decoration: none;
letter-spacing: 1.6px;
color: #B92B37;
}
.mtextred {
font-family: Comic Sans MS;
font-style: normal;
font-size: 16px;
font-weight: bold;
text-decoration: none;
letter-spacing: 1.6px;
color: #B92B37;
}
.mtextgrred {
font-family: Comic Sans MS;
font-style: normal;
font-size: 18px;
font-weight: bold;
text-decoration: none;
letter-spacing: 1.6px;
color: #B92B37;
}
.mini {
font-family: Verdana;
font-style: normal;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #808080;
}
.mini1 {
font-family: Verdana;
font-style: normal;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #808080;
}
.minibild {
font-family: Verdana;
font-style: normal;
font-size: 9px;
font-weight: normal;
text-decoration: none;
color: #808080;
}
.kontakt {
font-family: Verdana;
font-style: normal;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #000066;
}
a:link {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #BB8800;
}
a:visited {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #447766;
}
a:focus {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: black;
background-color: #889977;
}
a:hover {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: black;
}
a.gr:link {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 20px;
font-weight: normal;
text-decoration: none;
color: #BB8800;
}
a.gr:visited {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 20px;
font-weight: normal;
text-decoration: none;
color: #447766;
}
a.gr:focus {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 20px;
font-weight: normal;
text-decoration: none;
color: black;
background-color: #889977;
}
a.gr:hover {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 20px;
font-weight: normal;
text-decoration: none;
color: black;
}
a.menu:link {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #BB8800;
background-color: #eeffff;
padding: 10px;
}
a.menu:visited {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #447766;
background-color: #eeffff;
padding: 10px;
}
a.menu:focus {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style:normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: black;
background-color: #889977;
padding: 10px;
}
a.menu:hover {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #BB8800;
background-color: #889977;
padding: 10px;
}
a.tab:link {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #BB8800;
background-color: #eeffff;
width: 178px;
height: 22px;
}
a.tab:visited {
display: block;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #447766;
background-color: #eeffff;
width: 180px;
height: 17px;
padding-top: 4px;
}
a.tab:focus {
display: block;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: black;
background-color: #889977;
width: 180px;
height: 17px;
padding-top: 4px;
}
a.tab:hover {
display: block;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #BB8800;
background-color: #889977;
width: 180px;
height: 17px;
padding-top: 4px;
}
a.klein:link {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #BB8800;
}
a.klein:visited {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #447766;
}
a.klein:focus {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: black;
background-color: #889977;
padding: 2px;
}
a.klein:hover {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: black;
}
a.fett:link {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #BB8800;
}
a.fett:visited {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #447766;
}
a.fett:focus {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: black;
background-color: #889977;
padding: 2px;
}
a.fett:hover {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style:normal;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: black;
}
a.zur:link {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style:normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #990033;
}
a.zur:visited {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style:normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #990033;
}
a.zur:focus {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style:normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: black;
background-color: #669999;
}
a.zur:hover {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style:normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: black;
}
a.lotto:link {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 18px;
font-weight: normal;
text-decoration: none;
color: red;
}
a.lotto:visited {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 18px;
font-weight: normal;
text-decoration: none;
color: red;
}
a.lotto:focus {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 18px;
font-weight: normal;
text-decoration: none;
color: red;
}
a.lotto:hover {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 18px;
font-weight: normal;
text-decoration: none;
color: red;
cursor: url(https://www.ibra.at/brita/images/gewinn/ankreuzen_01.jpg),auto;
}
a.such:link {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #000000;
}
a.such:visited {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #447766;
}
a.such:focus {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: black;
background-color: #889977;
}
a.such:hover {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: black;
}
img {border:0;}
img.gewinn {
border-width: 1px;
border-style: solid;
border-color: #BB8800;
border-radius: 15px;
}
table {
width:100%;
max-width: 976px;
table-layout: fixed;
border-collapse: seperate;/* seperate oder collapse */
border-spacing: 0px;
}
table.kopf {
width: 100%;
max-width: 976px;
height: 50px;
border-width: 1px;
border-style: solid;
border-color: #BB8800;
border-radius: 15px;
padding: 8px;
text-align: center;
table-layout: fixed;
}
table.fuss {
width: 100%;
max-width: 976px;
height: 30px;
border-width: 1px;
border-style: dotted;
border-color: #BB8800;
border-radius: 10px;
padding: 1px;
text-align: center;
table-layout: fixed;
}
table.report {
width: 944px;
border-width: 1px;
border-style: solid;
border-color: #777777;
padding: 12px;
text-align: left;
table-layout: fixed;
}
table.lotto {
width: 300px;
border-width: 3px;
border-style: solid;
border-color: red;
border-radius: 3px;
padding: 4px;
text-align: center;
table-layout: fixed;
}
td.lotto {
text-align: center;
border-width: 2px;
border-style: solid;
border-color: red;
border-radius: 3px;
padding: 12px;
}
tr.kleinzeilig {
height: 30px;
}
td {
text-align: center;
}
td.li {
text-align: left;
}
td.re {
text-align: right;
}
td.lireob {
border-left-width: 1px;
border-left-style: solid;
border-right-width: 1px;
border-right-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-color: #BB8800;
}
td.un {
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #BB8800;
}
td.oben {
vertical-align: top;
}
td.report {
vertical-align: top;
text-align: justify;
padding: 15px;
}
td.mittig {
vertical-align: middle;
}
td.unten {
vertical-align: bottom;
}
td.ls { /* letzte Spalte */
width:100%;
}
td.leer {
text-align: center;
border-width: 0px;
border-style: solid;
border-color: red;
border-radius: 3px;
padding: 12px;
}
td.gru {
background-color:#8FBC8F;
width:600px;
}
td.bei {
background-color:#EAEAAE;
width:600px;
}
td.zwr {
height:1px;
background-color:#990033;
width:100%;
}
#tabellenbild {
width:100%;
max-width: 976px;
border-width: 1px;
border-style: solid;
border-color: #BB8800;
padding: 5px;
text-align: center;
table-layout: fixed;
border-spacing: 5px;
border-radius: 15px;
}
#zeilenbild {
height: 190px;
}
#zellenbild {
width: 155px;
text-align: center;
border-width: 1px;
border-style: solid;
border-radius: 15px;
border-color: #D1A578;
background-color: #ffffff;
}
input.log {
color: black;
background-color: #F6F5C7;
border-width:1px;
border-style:solid;
border-color:#990033;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
height:24px;
}
input.login {
color: black;
background-color: #F6F5C7;
border-width:1px;
border-style:solid;
border-radius: 5px;
border-color:#990033;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
height:20px;
}
input.log_send {
color: black;
background-color: #F6F5C7;
border-width:1px;
border-style:solid;
border-radius: 5px;
border-color:#990033;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
height:24px;
}
input.log_send_gr {
color: white;
background-color: #336666;
border-width:1px;
border-style:solid;
border-radius: 5px;
border-color:#990033;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
height:24px;
}
input.log_send_ro {
color: white;
background-color: #FF2211;
border-width:1px;
border-style:solid;
border-radius: 5px;
border-color:#990033;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
height:24px;
}
input.rad {
color: black;
background-color: #F6F5C7;
border-width:1px;
border-style:solid;
border-color:#990033;
font-family: Verdana, Arial, Helvetica, sans-serif;
height:10px;
}
select {
color: black;
background-color: #F6F5C7;
border-width:1px;
border-style:solid;
border-color:#990033;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height:16px;
}
select.log {
color: black;
background-color: #F6F5C7;
border-width:1px;
border-style:solid;
border-color:#990033;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
height:22px;
}
select.log_re {
color: black;
background-color: #F6F5C7;
border-style:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
height:22px;
width: 20px;
}
dialog {
display: none;
position: relative;
background: white;
border: 1px solid grey;
border-radius: 15px;
z-index:1002;
padding: .5em 1em;
width: 100%;
height: auto;
}
dialog[open="open"] {
display: block;
}
@media (min-width: 30em) {
dialog {
position: absolute;
top: 30%;
margin-top: -10em;
left: 30%;
margin-left: -10em;
width: 30em;
}
}
#backdrop { /* Ebene zwischen Hintergrund und Dialog-Box, Pseudoelement noch nicht implementiert */
display:none;
position: fixed;
top: 0px;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
dialog #close-dialog {
position: absolute;
right: 0;
top: 140px;
height: 1.8em;
cursor: pointer;
background-color: red;
color: white;
font-weight: bold;
font-size: 1em;
border-radius: 0 .5em .5em;
}
</style>
<body>
<table>
<tr>
<td style="width:20px;">
</td>
<td class="li" style="width:480px;">
<span class="mtextgrred">WILLKOMMEN in unserem SHOP</span>
<img border="0" src="/image/smiley_02.jpg" width="96" height="72" align="absmiddle">
</td>
<td class="li" style="width:150px;">
<div class="kontakt">
Einkaufen nach Lust und Laune,<br>
rund um die Uhr<br>
und mit Deinem Einkauf eine gemeinnützige Organisation unterstützen<br>
</div>
</td>
<td>
<img border="0" src="/image/user.jpg" width="70" height="70">
</td>
<td>
</td>
</tr>
</table>
<br>
<div class="mini1">
<table style="height:60px;">
<tr>
<td class="li" style="width:60px;">
</td>
<td style="width:150px;"><img border="0" src="/image/brita-logo0005.png" width="150" height="42"></td>
<td style="width:30px;"> </td>
<td style="width:300px;"><b>Ein BESCHÄFTIGUNGSBETRIEB des</b></br>
<a href="https://www.ibra.at/vpse/index.html" target="_blank" title="Informationen zum VPSE - Kärnten">
<img border="0" src="/image/vpse_logo_02.png" width="148" height="36">
</a>
</td>
<td style="width:30px;"> </td>
<td class="li" style="width:215px;">
<div class="kontakt">
geleitet von:<br>
<span class="mtextgrred">Brita</span><b> - Ranftl</b><br>
Gendarmeriestraße 4<br>
9073 Klagenfurt am Wörthersee
</td>
<td class="ls"> </td>
</tr>
</table>
</div>
<br>
<input class="login" type="text" placeholder=" Wonach suchst Du?" style="width:300px;" onkeyup="searchFor(this.value);"/>
<a href="https://www.ibra.at/brita/shop/index.php">X</a><br><br>
<div id="ergebnis"></div><br>
<!--Sonderangebote-->
<span class="mtextgrred"><b>Sonderangebote:</b></span><br>
<table class="kopf">
<tr>
<td class="li" style="width:200px;">
<button data-wert="dialogid1" id="open-dialog" class="close-dialog" >
<img border="0" src="/image/1002_kl.jpg" width="100" height="150">
</button>
<dialog id="dialogid1" role="dialog">
<button id="close-dialog">Schließen</button>
Art. Nr. 1002<br>
<h1>Puppe nach Waldorf Art</h1>
<p><img border="0" src="/image/1002.jpg" width="300" height="450"></p>
</dialog>
</td>
<td class="li">
<!--Produkt-->
<span class="mtextgrred">
Puppe nach Waldorf Art </span>
</td>
<td class="li">
<!--Spezifikation-->
<span class="mtext">
Ich bin Doris, 38 cm groß, habe speichelechte Haare und bin für Babys ab der Geburt an geeignet. Qualitativ hochwertige Verarbeitung mit Puppen- und Kleiderstoffen aus der EU. Keine billige Importware. Keine Bleichmittel, keine chemischen Belastungsstoffe. </span>
</td>
<td style="width:60px;">
</td>
<td class="li">
<!--Einheitspreis-->
<b>25,00 EUR</b>
</td>
</tr>
</table><br>
<table class="kopf">
<tr>
<td class="li" style="width:200px;">
<button data-wert="dialogid2" class="open-dialog">
<img border="0" src="/image/2001_kl.jpg" width="100" height="150">
</button>
<dialog id="dialogid2" role="dialog">
<button class="close-dialog" id="close-dialog">Schließen</button>
Art. Nr. 2001<br>
<h1>Dirndltasche</h1>
<p><img border="0" src="/image/2001.jpg" width="300" height="450"></p>
</dialog>
</td>
<td class="li">
<!--Produkt-->
<span class="mtextgrred">
Dirndltasche </span>
</td>
<td class="li">
<!--Spezifikation-->
<span class="mtext">
Reizendes Dirndltascherl, gefüttert und mit langem, verstellbarem Umhängeriemen </span>
</td>
<td style="width:60px;">
</td>
<td class="li">
<!--Einheitspreis-->
<b>24,90 EUR</b>
</td>
</tr>
</table><br>
<table class="kopf">
<tr>
<td class="li" style="width:200px;">
<button data-wert="dialogid3" class="open-dialog">
<img border="0" src="/image/2001.jpg" width="300" height="450">
</button>
<dialog id="dialogid3" role="dialog">
<button class="close-dialog" id="close-dialog">Schließen</button>
Art. Nr. 4015<br>
<h1>Kette und Ohrringe</h1>
<p><img border="0" src="/image/2001.jpg" width="300" height="450"></p>
</dialog>
</td>
<td class="li">
<!--Produkt-->
<span class="mtextgrred">
Kette und Ohrringe </span>
</td>
<td class="li">
<!--Spezifikation-->
<span class="mtext">
Handarbeit aus Viva Decor- und Glasperlen 48 cm lang, plus Verlängerungskettchen </span>
</td>
<td style="width:60px;">
</td>
<td class="li">
<!--Einheitspreis-->
<b>5,90 EUR</b>
</td>
</tr>
</table><br>
und hier die Kategorien<br><br>
und hier die Fußzeile
<div id="backdrop"></div>
</body>
<script>
document.addEventListener("DOMContentLoaded", function () {
var buttons = document.querySelectorAll( 'button' );
buttons.forEach( (i) => {
i.addEventListener( 'click', (e) => {
open( i.dataset.wert );
var div = document.querySelector('#backdrop');
div.style.display='block';
});
});
});
function open(d){
dia=document.getElementById(d);
dia.style.display='block';
clo=dia.firstElementChild;
clo.addEventListener('click',function(e){
close(d)
})
document.addEventListener('keydown', function(event) {
if (event.keyCode == 27) {
close(d);
}
}, true);
}
function close(d){
document.getElementById(d).style.display='none';
var div = document.querySelector('#backdrop');
div.style.display='none';
}
</script>
</html>