HTML + JS: Dialog auf Webseite anzeigen

[Von K. (klausewitz)]

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

[Nil (nilsnilss)]

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.

[Von K. (klausewitz)]

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!  :)

[S. R. (svenska)]

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.

[Finn S. (scooter757)]

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.

[Daniel F. (df311)]

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 ;-)

[Cyblord -. (Gast)]

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.

[Georg (Gast)]

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

[guest (Gast)]

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