"erstelle eine Modalbox" häää?

gericoach

Ich weiss, das ist off-topic und hat nix mit WP zu tun, aber eventuell kann/will jemand helfen:

Ich arbeite an einer html5 Seite und brauche eine Modalbox. Hab entsprechenden Code gefunden, habe aber ein Vakuum zu folgedem Thema:
Da steht:

Zitat

1. [COLOR=#b22222]Create a modal box.[/COLOR]
view source

Wie ist das gemeint? Soll ich ne html Seite erstellen? Ich verstehe es nicht. Wenn ich den reinen Code (ohne header usw) in die Seite eingebe, wird er natürlich auch angezeigt... Kann einer von Euch mal helfen? Und bitte nicht den Kopf schütteln :)

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

naja es ist ein bisschen ein vermurckstes html5,
aber irgendwie möglich so....

HTML

<html .....>
.....
</html>
<body>
<div ...
<header


...


</body></html>

Alles anzeigen

Brawler

Hallo,

es gibt verschiedene Wege, ein modales Fenster einzubinden. Dein Beispiel ist hier eher nur ein Grundgerüst und ein Rahmen für eine Möglichkeit.

Grundsätzlich wird das Modal selbst am Ende der HTML-Seite eingebunden. Wenn Du bspw. mit Bootstrap oder Foundation arbeitest, sind die Klassen dafür vorgegeben.

Während das CSS für die Formatierung der Elemente im Modal sorgt, ist etwas JavaScript für die Interaktion notwendig (Öffnen, Schließen, Resize, etc.).

In modernen Anwendungen wird der Code für das Modal nur in den Seiten integriert, in denen es auch benötigt wird. Komplexere Anforderungen erlauben auch die Erstellung zur Laufzeit - das erfolgt dann meist direkt über JavaScript/jQuery. Die ewige Performancediskussion...

Wenn Du dynamische Inhalte in das Modal laden möchtest (bspw. ein PHP-Skript oder eine externe HTML-Seite), geht das relativ bequem mit jQuery (sychron/asynchron bleibt Dir überlassen).

Du solltest also zunächst den DIV des Modals selbst am Ende der Seite einbetten. Ein display: none sorgt dann auch dafür, dass es nicht angezeigt wird. :)

Marcus[IS]

Hi geri,

Ich hätte hier ein nettes Beispiel, auch wenn es für Bootstrap ist.
Die verwendeten Anweisungen werden dort auch näher erklärt, warum und weshalb es so aufgebaut wird.
http://www.w3schools.com/bootstrap/bootstrap_modal.asp

Von deinem obigen Code ausgehend, würde ich hingehen und eine html Seite erstellen.
Entsprechende jquery Scripteinbindung damit das ganze funktioniert natürlich vorrausgesetzt. ;)

gericoach

Ihr liegt komplett richtig: die Seite basiert auf bootstrap und html5. Ich habe gelesen, dass bootstrap ein eigenes Modal Feature mitbringt, konnte aber nicht erkennen, wie man es umsetzt.
Der Code ist nur einer von vielen, die ich gefunden habe.
Werde Eure Ansätze und Vorschläge analysieren. Waren sehr gute Beiträge, wofür ich Euch wirklich dankbar bin!!!

Brawler

Füge den Code hier vor den </body>-Tag ein:

Code

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

Alles anzeigen

Um das Modal zu öffnen (ohne JavaScript):

Code

<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Open Modal</a>

Wenn Du beim href eine Seite angibst, wird diese in das Modal geladen. Bitte beachte, dass es hier Unterschiede bei den BS-Versionen gibt.

Oder per Button:

Code

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#basicModal">Launch modal</button>

JavaScript-Optionen:

Code

var options = {
    "backdrop" : "static"
}
$('#basicModal').modal(options);

Events (Wichtig, wenn Du bspw. ein Video in einem Modal lädst):

show.bs.modal
shown.bs.modal
hide.bs.modal
hidden.bs.modal
loaded.bs.modal

Abfragebeispiel:

Code

$('#basicModal').on('shown.bs.modal', function (e) {
    alert('Modal successfully shown!');
});

Für das Modal gibt es verschiedene CSS-Klassen, bspw. die Anzeigegröße. Die kannst Du aber den Cheatsheets entnehmen. :)

gericoach

@Brawler: der modal effekt klappt leider nicht. Hab den Code unten eingesetzt und testweise ganz unten auf der frontseite den link gesetzt. Ne Idee was da falsch ist?
URL: http://asia-lieferdienst.de/nexia/

btw. nein, ich verdiene damit kein Geld, ist für meine "sister in law", also direkte familie! ;-)

Brawler

Du solltest natürlich auch das JavaScript von Bootstrap einbinden, sonst geht das nicht. :)

Siehe http://getbootstrap.com/javascript/

Unter http://getbootstrap.com/customize/ solltest Du dann mind. die Component animations und Modals auswählen. Dann funktioniert das auch. ;)

gericoach

erledigt. Hab das komplette Paket genommen, die beiden .js, die im Paket lagen verlinkt. Ebenso die alte bootstrap.css ausgetauscht. passiert trotzdem nix. Was mache ich mit der config.json? wo muss die hin?

gericoach

es wird langsam, das modalfenster kommt, verschwindet aber sofort wieder. Kennt wer dieses Phänomen?

chilidog

AdBlocker / Pop-up Blocker aktiv?

PS: Nö, daran lag es nicht.

gericoach

wäre nicht das erste mal :) aber chrome reagiert genauso und der hat keinen adblocker.

gericoach

Der Sourcecode sieht nun so aus:

Code

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">CLAIM OFFER</button>


<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>


<!-- Modalcode -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Your Offer</h4>
      </div>
      <div class="modal-body">
        Bee do bee do bee do hana dul sae uuuhhh bee do bee do bee do hahaha jeje. Poopayee tatata bala tu daa me want bananaaa! Baboiii poopayee poopayee jiji. Hana dul sae gelatooo bee do bee do bee do butt tulaliloo po kass me want bananaaa! Para tú ti aamoo! Bappleees po kass. Bappleees ti aamoo! Baboiii poulet tikka masala poopayee potatoooo jeje hana dul sae. Chasy bananaaaa bee do bee do bee do ti aamoo! Tulaliloo hahaha butt wiiiii bappleees jiji ti aamoo! 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!--ENDE Modal-->

Alles anzeigen

Brawler

Du hast auf der Seite jetzt 2 Modals eingebunden. Bitte entferne zur Prüfung eins.

Weiterhin benötigt das Modal eine ID - die dann auch im href aufgerufen werden sollte (keine Klasse).

Schau mal bei diesem Fiddle, das ist etwas übersichtlicher: http://jsfiddle.net/jschr/3kgbG/ Das Modal wird dabei per JavaScript geöffnet und die Funktion liefert dann ein Ergebnis zurück, welcher Button gedrückt wurde. :)

Nachtrag: Du hast auch noch einen JS-Fehler auf der Seite.

Code

$("#form1").validator({
        position: 'bottom left',
        offset: [2, 2]
});

Funktion ist nicht vorhanden. ;)

gericoach

Ich sitz davor wie ein Schwein vorm Uhrwerk...bin echt zu blöd dafür. Danke für Deine Mühe!!! Nun weiss ich auch, wieso das Email Formular nicht geht...das stand an Platz zwei hinter dem Modal Dingens.

>> hab jetzt die codes aus dem fiddle umgesetzt, da passiert überhaupt nix mehr. ich verzweifel langsam...
Hab den .js Code in eine Datei modal.js ausgelagert, die im header aufgerufen wird. dann den code unten eingesetzt und die style.css erweitert.

Brawler

Bootstrap setzt gewisse Dinge voraus... :)

Stell bitte zuerst sicher, dass Du Bootstrap ordnungsgemäß in die Seite eingebunden hast. Streng nach Vorschrift. Inkludiere Deine eigenen Skripte und CSS danach. Mach das bitte alles erst einmal im header, verschieben kannst Du das später immer noch.

Dann binde diesen Code am Ende der Seite ein (den Button kannst Du danach immer noch verschieben):

Code

<a data-toggle="modal" href="#gericoach" class="btn btn-primary">Modal öffnen</a>




<div class="modal" id="gericoach">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">gericoach macht ein Modal!</h4>
        </div>
        <div class="modal-body">
          <p>Hier steht dann Dein persönlicher Inhalt!</p>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Schließen</a>
          <a href="#" class="btn btn-primary">Speichern</a>
        </div>
      </div>
    </div>
</div>

Alles anzeigen

Das funktioniert so 100% - wenn Bootstrap korrekt eingebunden wurde.

gericoach

ich liebe den title :lol::

[COLOR=#4b0082]"gericoach macht ein Modal!"[/COLOR]

Werde morgen nochmal bei Null starten. Danke für den Code!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

gericoach

@Brawler: Hey, Du hattest (wie zu erwarten war) komplett Recht!!!!!!!!!!!!!!!!! Habe den Original Bootstrap Code eingebaut und es läuft! DANKE,DANKE,DANKE!!!! Wenn Du mal Hilfe bei Layout/Design/Icons oder was auch immer brauchst: Here i am!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

"erstelle eine Modalbox" häää?

Jetzt mitmachen!