Forum: PC-Programmierung HTML + JS: Dialog auf Webseite anzeigen


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von von K. (klausewitz)


Bewertung
0 lesenswert
nicht lesenswert
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

von Nils F. (nilsnilss)


Bewertung
0 lesenswert
nicht lesenswert
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 von K. (klausewitz)


Bewertung
0 lesenswert
nicht lesenswert
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 S. R. (svenska)


Bewertung
0 lesenswert
nicht lesenswert
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.

von Finn S. (scooter757)


Bewertung
0 lesenswert
nicht lesenswert
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 Daniel F. (df311)


Bewertung
0 lesenswert
nicht lesenswert
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 ;-)

von Cyblord -. (Gast)


Bewertung
0 lesenswert
nicht lesenswert
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.

von Georg (Gast)


Bewertung
0 lesenswert
nicht lesenswert
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

von guest (Gast)


Bewertung
0 lesenswert
nicht lesenswert
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

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.