Für ein neues Projekt habe ich mein Framework aktualisiert und auch einige neue Erweiterungen hinzugefügt. Dabei ist mir das jQuery-Plugin “NyroModal” sehr postiv aufgefallen.
NyroModal ist ein sehr anpassbares “Modal Layer” – Plugin für jQuery. Das Aussehen ist sehr leicht mit Hilfe von CSS anpassbar. Auch die Animationen sind entweder über eigenen Code oder über Animationsfunktion von jQuery austauschbar.
NyroModal Features
- Ajax Call
- Ajax Call with targeting content
- Ajax call can change the modal size
- Single Image
- Images Gallery with arrow navigating
- Form
- Form with targeting content
- Form with file upload
- Form with file upload with targeting content
- Dom Element
- Manual Call
- Iframe
- Error handling
- Modal will never goes outside the view port
- Esc key to close the window
- Customizable animation
- Customizable look
- W3C valid HTML
Einige Code-Beispiele sind unter http://nyromodal.nyrodev.com/#usage zu finden.
Ein Link, der ein modales Fenster öffnen soll, muss nur um class=”nyroModal” erweitert werden. Folgender Link öffnet einen modalen Layer und füllt diesen per Ajax mit den Inhalt der URL: <a href=”/test.ajax.php?test=1″ class=”nyroModal”>click …</a>.
Die Größe des Layers wird automatisch an den geladenen Inhalt angepasst.
Ich bin von der Anpassbarkeit und dem Funktionsumfang von NyroModal sehr begeistert.
Der Entwickler hat in seinem Blog noch einige weitere Informationen zu nyroModal geposted.
Noch ein kleiner Tipp für den Fall, dass Links per Ajax nachgeleaden werden, die ein modales Fenster öffnen sollen:
<script language="javascript" type="text/javascript">
$("a.nyroModal[class]").nyroModal();
</script>
Dieser Javascript-Code fügt die nyroModal-Funktionalität allen Links mit der class “nyroModal” hinzu.
Hallo und vielen Dank für die Informationen. Ich bin eigentlich auf der Suche nach einem schönen Popup Layer o.Ä.
Was glaubst du, man könnte doch nyroModal so einstellen, dass Inhalt eines div’s in dem nyroModal Fenster nach dem Laden der Seite automatisch angezeigt wird? Danke!
Ich habe alles bei mir hochgeladen und den Code in meine Seite die schon Elemente von Jquery hat geschrieben.
Nun habe ich das Problem das der Layer hinter der Seite angezeigt wird.
Wie kann ich das beheben? Bin nicht so der Experte…