JavaScript Frage, HTML Seite via Greybox ausgeben?

[Domi83]

Hallo Leute, ich habe da mal eine kleine Frage an euch... Ist es möglich HTML Content in einer mit Java oder jQuery erstellten Greybox wiederzugeben? Ähnlich wie in einem iFrame.

Es geht um folgendes Szenario, Kollege von mir hat eine Eingabemaske komplett in einer Greybox gebaut, jedes Input, Select oder Textarea Feld steht im JavaScript Code und wir dann in dieser Greybox ausgegeben. Da ich mit JavaScript nicht so fit bin und eher mit PHP meine Abfragen, Funktionen etc. bauen kann, war mein Gedanke das ich diese gesamte Eingabemaske in einer HTML / PHP ausgegebenen Seite aufbaue und hinterher diese Maske nur noch in der Greybox wiedergeben lasse

Besteht so eine Möglichkeit? Egal was ich mit greybox suche, die Treffer werfen mir meistens die greybox aus mit der ich Bilder auf den Seiten anzeigen lassen kann, dass ist ja nicht mein Plan.

Gruß, Domi

 

[Bagbag]

Was ist eine Greybox?

 

[Domi83]

Moin moin, ein kleines Beispiel gibt es hier, da kommt eine Box in den Vordergrund und der Rest wird halt grau hinterlegt.

Hoffe, dass hilft als Beispiel

 

[Bagbag]

Sowas wäre natürlich auch mit PHP möglich, doch ist die Benutzererfahrung dabei wohl nicht so berauschend. Freunde dich dafür lieber mit JavaScript an.

 

[Domi83]

Ja, dass wäre eine Option... ist aber nicht meine Frage gewesen Ich hab schon meine Gründe wieso ich mich mit dem System was er aufgebaut hat, nicht anfreunden möchte.

 

[Bagbag]

Dann musst du deine Frage detaillierter stellen.

 

[Domi83]

Wie soll ich diese denn noch detaillierter stellen? Ich hab es doch schon geschrieben was ich möchte...

Ich möchte eine Eingabemaske (eingabe.html oder was auch immer) in einem JavaScript Alert (oder greybox) ausgeben lassen, ähnlich wie in einem iFrame, damit ich diese Eingabe ausfüllen kann

 

[Bagbag]

Deine Frage war, ob das mit PHP möglich ist. Dann sagte ich ja, aber mit JS wäre es schöner (der Verzögerung wegen). Wenn ich dich jetzt richtig verstehe, willst du in der Greybox ein iframe haben. Und da ist die Antwort: ja, das geht. Ersetze die Eingabefelder deines Kumpels einfach mit einem iframe.

 

[Domi83]

Okay, also noch mal von vorne... dann hab ich das ungünstig erklärt. Ich habe eben einmal durch den Quellcode geschaut, Kollege von mir hat die gesamte Eingabemaske in ein alert() gebaut, da ich mich aber nicht mit den ganzen Abfragen im JavaScript herum quälen möchte, baue ich die Eingabemaske in html nach und diese von mir erstellte HTML Eingabe möchte ich in einem alert() wiedergeben.

Am Ende muss ich, weil es für mich einfacher ist nur noch die html basierte Eingabemaske anpassen und diese Eingabemaske wird in einem alert wiedergegeben.

Konnte ich das nun besser erklären?

 

[Bagbag]

Ich denke schon. Alert hast du vorher nicht genannt.

Dein Kumpel ruft also für jedes Feld, dass see Nutzer ausfüllen soll ein alert auf?

In einem alert kann man nur text anzeigen, also damit ist dein Vorhaben nicht möglich. Google mal nach "Modal" im Zusammenhang mit HTML.

 

[kling1]

ist doch einfach ein modal.. und wenn er javascript dabei zu mehr als das ganze zu triggern nutzt.. dann macht er was falsch.. der inhalt des modals sollte im html stehen

schau dir das mal an
https://www.w3schools.com/howto/howto_css_modals.asp

 

[Domi83]

Ja top!! Das Beispiel unten sieht auch sehr gut aus und beim überfliegen, scheint es so als könnte ich alles via CSS etc. anpassen. So etwas sollte es sein und mit dem Begriff "modal" kann ich mich ja dann weiter durch das Netz wuseln wenn es Probleme gibt

Die Maske die mein Arbeitskollege gebaut hat, hat er komplett in die .js Datei geschrieben und lässt diese am Ende via alert() ausgeben. Ein jquery Datepicker kann ich z.B. darin auch nicht einbauen. Genauso haben wir zum bearbeiten von Daten ein Tool welches die IBAN prüfen kann, dazu gibt es von meiner Seite her auch eine kleine jquery Funktion, sobald ich das IBAN Feld verlasse und mehr als X Zeichen vorhanden sind, prüft er die Bankverbindung. Das kann ich in dem alert auch nicht hinterlegen.

Hoffe ich konnte das gebaute von meinem Kollegen entsprechend erklären.. ein ungefähres Beispiel sieht so aus,

var html_formular = ''+
 '<ul id="contract-BLabla">'+
  '<li>'+
   '<label><b>Details</b></label>'+
   '<ul class="item">'+
    '<li style="width:50%;  margin:0;">'+
     '<ul class="subitem">'+
      '<li>'+
       'BLabla:<br/><b>'+data.BLabla+'</b>'+
      '</li>'+
      '<li>'+
       'BLabla:<br/><b>'+data.BLabla+' €</b>'+
      '</li>'+
      '<li>'+
       'BLabla:<br/><b>'+data.BLabla+'</b>'+
      '</li>'+
     '</ul>'+
    '</li>'+
    '<li style="width:50%;  margin:0;">'+
     '<ul class="subitem">'+
      '<li>'+
       'BLabla:<br />'+
       '<input '+data.access+' id="contract-BLabla" name="BLabla" type="text" value="'+data.BLabla+'">'+
      '</li>'+
     '</ul>'+	
    '</li>'+
   '</ul>';

Falls da jetzt schließende Tags fehlen, bitte ich dieses zu entschuldigen. Um ein grobes Beispiel zu erzeugen, hab ich einfach mal eine Passage aus dem Code raus gezogen.

Gruß, Domi

 

[Domi83]

Schönen guten Abend, ich bin in den letzten Tagen noch nicht dazu gekommen mich mit "modals" zu befassen, da ich aber für einen anderen Bekannten nach seinem Onlineshop gucke und mich gerade versuche mit dem Gambio System vom Start an, vertraut zu machen habe ich dabei etwas gesehen

Das was der Shop da anzeigt (siehe Anhang) sind doch diese "modals", oder irre ich mich da?

Gruß, Domi

 

[John Reese]

Korrekt, sieht nach einem Bootstrap 3 Modal aus: https://getbootstrap.com/javascript/#modals

 

[Domi83]

Ja hammer, ich habe mal auf einer Blankoseite so ein Modal eingebaut und muss sagen, dass gefällt mir. Da würde sogar der von jquery bereitgestellte datepicker funktionieren, zumindest funktioniert er in meinem test Jetzt muss ich das ganze nur noch irgendwie in das komische Grundgerüst von meinem Kollegen implementieren und dann könnte ich damit weiter arbeiten

Ich bedanke mich vielmals für die Hilfe.
Gruß, Domi