Nur einmaliger Aufruf möglich

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: www.ibra.at/brita/shop/index.php

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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; background-image: url("../images/zeitung.jpg"); 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; background-image: url(../images/pferdekopf.jpg); } #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;">&nbsp; </td> <td class="li" style="width:480px;"> <span class="mtextgrred">WILLKOMMEN&nbsp; in unserem &nbsp;SHOP</span> <img border="0" src="http://www.ibra.at/brita/images/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&uuml;tzige Organisation unterst&uuml;tzen<br> </div> </td> <td> <img border="0" src="http://www.ibra.at/brita/images/uhr_symbol.gif" width="70" height="70"> </td> <td> <img border="0" src="http://www.ibra.at/brita/images/warenkorb_0.png" width="50" height="50"> </td> </tr> </table> <br> <div class="mini1"> <table style="height:60px;"> <tr> <td class="li" style="width:60px;"> <img border="0" src="http://www.ibra.at/brita/images/menue.png" width="25" height="25"> </td> <td style="width:150px;"><img border="0" src="http://www.ibra.at/brita/images/brita-logo0005.png" width="150" height="42"></td> <td style="width:30px;">&nbsp;</td> <td style="width:300px;"><b>Ein&nbsp;&nbsp; BESCH&Auml;FTIGUNGSBETRIEB&nbsp;&nbsp; des</b></br> <a href="https://www.ibra.at/vpse/index.html" target="_blank" title="Informationen zum VPSE - K&auml;rnten"> <img border="0" src="http://www.ibra.at/brita/images/vpse_logo_02.png" width="148" height="36"> </a> </td> <td style="width:30px;">&nbsp;</td> <td class="li" style="width:215px;"> <div class="kontakt"> geleitet von:<br> <span class="mtextgrred">Brita</span><b> - Ranftl</b><br> Gendarmeriestra&szlig;e 4<br> 9073 Klagenfurt am W&ouml;rthersee </td> <td class="ls">&nbsp;</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="http://www.ibra.at/brita/images/produkte/1002_kl.jpg" width="100" height="150"> </button> <dialog id="dialogid1" role="dialog"> <button id="close-dialog">Schlie&szlig;en</button> Art. Nr. 1002<br> <h1>Puppe nach Waldorf Art</h1> <p><img border="0" src="http://www.ibra.at/brita/images/produkte/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;"> &nbsp; </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="http://www.ibra.at/brita/images/produkte/2001_kl.jpg" width="100" height="150"> </button> <dialog id="dialogid2" role="dialog"> <button class="close-dialog" id="close-dialog">Schlie&szlig;en</button> Art. Nr. 2001<br> <h1>Dirndltasche</h1> <p><img border="0" src="http://www.ibra.at/brita/images/produkte/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;"> &nbsp; </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="http://www.ibra.at/brita/images/produkte/4015_kl.jpg" width="100" height="150"> </button> <dialog id="dialogid3" role="dialog"> <button class="close-dialog" id="close-dialog">Schlie&szlig;en</button> Art. Nr. 4015<br> <h1>Kette und Ohrringe</h1> <p><img border="0" src="http://www.ibra.at/brita/images/produkte/4015.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;"> &nbsp; </td> <td class="li"> <!--Einheitspreis--> <b>5,90 EUR</b> </td> </tr> </table><br> und hier die Kategorien<br><br> und hier die Fu&szlig;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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!