Hallo, ich möchte auf einer selbst programmierten Webseite einen Dialog zur Eingabe verschiedener Werte einblenden. Das ganze sollte modal gestaltet sein, so daß der Dialog per [ok] oder [abbrechen] geschlossen werden muß, bevor die Seite wieder bedienbar ist. Also im Prinzip sowas ähnliches wie der klassische File-Open-Dialog unter Windows, nur daß ich verschiedene Zahlenwerte eingeben lassen will statt eine Datei auszuwählen. Außerdem soll das ganze später auch auf dem Handy/Tablett funktionieren und ohne externe Tool-Boxen a la AJAX etc auskommen. Was ich schon ausprobiert habe: 1) dialog() Element. Ging prompt unter firefox nicht :( 2) <div> mit entsprechendem Stylesheet. Öffnen und schließen per Link im HTML. Sieht schon so aus wie ich es gerne hätte. Nur wie kriege ich den Dialog initialisiert? Initialisierung im HTML findet zur Ladezeit statt, ich muß wegen veränderlicher Werte zur Einblend-Zeit initialisieren. Gibt es da ein geeignetes Event? Oder kann ich statt Link auch einen schönen Knopf+JavaScript nehmen? Das sähe auf Handy/Tablett eleganter aus... 3) Gibt es noch einen ganz anderen Ansatz? Sorry, wenn die Fragen blöd wirken. Ich drehe mich nur langsam gedanklich im Kreis :( Muß ja keine fertige Lösung sein, ein Ansatz würde mich schon helfen. ;) Danke & Grüße Klausewitz
Gast
#4927400
Am Besten anfangen jQuery zu benutzen und eins der 10000 Beispiele im Internet benutzen. Ist eigentlich echt einfach und mit "jquery modal" lässt sich bestimmt auch schnell eine Lösung ergooglen. Falls dann noch Probleme auftreten, am besten gleich noch (den relevanten Teil) deines Codes mit hier hochladen.
Hm, jQuery-Bibliothek ist das, was ich ursprünglich nicht nutzen wollte. ;) Aber wenn es da recht einfach geht, werde ich mir das doch mal anschauen müssen. Vielleicht kann ich die relevanten Code-Schnipsel da auch irgendwie entnehmen. Danke für den Tipp! :)
von K. schrieb: > Nur wie kriege ich den Dialog initialisiert? Initialisierung im HTML > findet zur Ladezeit statt, ich muß wegen veränderlicher Werte zur > Einblend-Zeit initialisieren. Du kannst mit Javascript jederzeit direkt im DOM herumspielen. Wenn du den Link (oder Button) nicht auf eine URL zeigen lässt, sondern mit "onclick=javascript:blubber()" verbindest, wird die entsprechende Funktion bei einem Klick aufgerufen. Dort kannst du die Werte dann von JS aus setzen. JQuery brauchst du nicht, wenn du nicht willst.
Naja, du kannst auch alles ohne jQuery machen, also mit "javascript Hausmitteln". Die benutzt jQuery intern auch (anders gehts ja nicht). Diese Hausmittel sind aber nicht so schön/elegant, aber falls es bei diesem Dialog bleiben soll kann man das auch so bewerkstelligen. Falls deine Anwendung allerdings komplexer wird gibts 2 Möglichkeiten: 1) Der Code wird sehr schnell sehr unübersichtlich. 2) Du baust dir selbst ne Art DOM-handling-system zusammen. In beiden Fällen kann man auch gleich weitere Bibliotheken benutzen.
von K. schrieb: > Hm, jQuery-Bibliothek ist das, was ich ursprünglich nicht nutzen wollte. und warum wenn man fragen darf? es gab auch mal prototype.js ;-)
Gast
#4927979
Daniel F. schrieb: > und warum wenn man fragen darf? Ist einfach nicht mehr hipp, damit gehört man schon zu den alten Knochen. ;) Nun gut viele Dinge sind nun in plain-JS verfügbar, d.h. man muss halt sehen ob jQuery noch notwendig ist.
Gast
#4928170
von K. schrieb: > Was ich schon ausprobiert habe: > 1) dialog() Element. Ging prompt unter firefox nicht :( Quatsch. Anbei Fragmente für einen Dialog: /* Neuen Spieler anlegen */ function ShowNewGamerDialog () { SetLeftPos ("NewGamer",GamerDialogLeft); SetTopPos ("NewGamer",GamerDialogTop); document.getElementById("NewGamer").classList.toggle("show"); } function HideNewGamerDialog () { document.getElementById("NewGamer").classList.remove("show"); } function GamerSetNew () { /*HideGamerDropdown();*/ Erasing = 0; HideAllPopups(); FreeGamer = NextFreeGamer(); if (FreeGamer > 0) { document.getElementById("GamerInp").value = ""; ShowNewGamerDialog(); } else { alert ("zuerst 1 Spieler löschen!"); } } function GamerSetNewOk() { var namestr = document.getElementById("GamerInp").value; HideAllPopups(); if (namestr != "") { Gamer[FreeGamer-1] = namestr; SetAllGamer(); } } ...... <div class="dialog-form" id="NewGamer" style="position: absolute;left:50px; top:210px; z-index:2;"> <form> <p> <label for="GamerInp">Neuer Spieler:</label> <input id="GamerInp" size="20" maxlength="50" type="text"> </p> <p> <input name="" value=" Ok " onclick="GamerSetNewOk()" type="Button"> <input name="" value="Abbrechen" onclick="HideAllPopups()" type="Button"> </p> </form> </div> <div class="dialog-form" id="GameMatrix" style="position: absolute;left:50px; top:210px; z-index:2;"> <table style="width: 600px;" border="1"> <tbody> <tr> <td style="width: 150px; height: 50px;">Spieler<br> </td> <td id="TabHead0" style="width: 150px; height: 50px;">S1</td> <td id="TabHead1" style="width: 150px; height: 50px;">S2</td> <td id="TabHead2" style="width: 150px; height: 50px;">S3</td> <td id="TabHead3" style="width: 150px; height: 50px;">S4</td> </tr> <tr> <td id="TabLeft0" style="width: 150px; height: 50px;">S1</td> <td id="TabCell00" style="width: 150px; height: 50px;">00<br> </td> <td id="TabCell01" style="width: 150px; height: 50px;">01<br> </td> <td id="TabCell02" style="width: 150px; height: 50px;">02<br> </td> <td id="TabCell03" style="width: 150px; height: 50px;">03<br> </td> </tr> <tr> <td id="TabLeft1" style="width: 150px; height: 50px;">S2</td> <td id="TabCell10" style="width: 150px; height: 50px;">10<br> </td> <td id="TabCell11" style="width: 150px; height: 50px;">11<br> </td> <td id="TabCell12" style="width: 150px; height: 50px;">12<br> </td> <td id="TabCell13" style="width: 150px; height: 50px;">13<br> </td> </tr> <tr> <td id="TabLeft2" style="width: 150px; height: 50px;">S3</td> <td id="TabCell20" style="width: 150px; height: 50px;">20<br> </td> <td id="TabCell21" style="width: 150px; height: 50px;">21<br> </td> <td id="TabCell22" style="width: 150px; height: 50px;">22<br> </td> <td id="TabCell23" style="width: 150px; height: 50px;">23<br> </td> </tr> <tr> <td id="TabLeft3" style="width: 150px; height: 50px;">S4</td> <td id="TabCell30" style="width: 150px; height: 50px;">30<br> </td> <td id="TabCell31" style="width: 150px; height: 50px;">31<br> </td> <td id="TabCell32" style="width: 150px; height: 50px;">32<br> </td> <td id="TabCell33" style="width: 150px; height: 50px;">33<br> </td> </tr> </tbody> </table> <form> <p> <input name="" value="Ok" onclick="MatrixOk()" type="Button"> <input name="" value="Abbrechen" onclick="HideAllPopups()" type="Button"> </p> </form> </div> Funktioniert wie Dialoge unter Windows, und das auch im Firefox. Georg
Gast
#4928753
Man kann sich ja auch eins der Framworks nehmen und in deren Sourcen schauen. Gibt ja auch nicht nur jQuery/jQueryUI, Alternative wäre z.B. github.hubspot.com/vex