Flyin Overlay & Overlay

Das Flyin Overlay und das Overlay bestehen aus zwei Einheiten. Die erste Einheit ist ein Toggle mit der Klasse .js-flyin-overlay-toggler, der für das Ansprechen des Javascripts benötigt wird. Die zweite Einheit ist der konkrete Inhalt, welcher mit den entsprechenden Attributen des Togglers verknüpft wird. Dies ist möglich durch das data-containerid Attribut oder das data-ajaxurl Attribut. Der Inhalt des Flyin Overlay kann komplett beliebig sein, sollte aber möglichst einfach gehalten werden, da das Flyin Overlay für sehr komplexe Inhalte nicht ausreichend Fläche bietet.

Nachfolgend eine Übersicht der möglichen Attribute für den Toggler:

data-layout
flyin|modal (default:flyin)
data-containerid (method 1)
The unique id of the content to show inside the overlay
data-ajaxurl (method 2)
The url of the content to show inside the overlay
data-title (optional)
Overlay title
data-auralopentext (optional)
The buttons aria-label when the overlay is hidden
data-auralclosetext (optional)
The buttons aria-label when the overlay is visible
data-opentext (optional)
The buttons text when the overlay is hidden (will replace the text inside span-element of the button)
data-closetext (optional)
The buttons text when the overlay is visible (will replace the text inside span-element of the button)

Inhalt laden via "data-containerid"

Flyin Layout

<button type="button" class="js-flyin-overlay-toggler" data-layout="flyin" data-containerid="#overlay01" data-auralopentext="Öffnet ein Overlay" data-auralclosetext="Schließt das Overlay" data-opentext="Overlay 1 öffnen (Flyout)" data-closetext="Overlay 1 schließen" data-title="Overlay Titel im Flyout"><span class="text">Click to toggle (Layout: flyin)</span></button>

Beispielcontainer :


<div id="overlay01" style="display: none;" >
    <!-- Place your content here to show inside overlay body -->
    <h2>Overlay 1 Content</h2><h3>Aenean commodo ligula eget dolor aenean massa consequat massa quis</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><br><a href="#" class="more">Test</a></div>

Modal Layout

<button type="button" class="js-flyin-overlay-toggler" data-layout="modal" data-containerid="#overlay01" data-auralopentext="Öffnet ein Overlay" data-auralclosetext="Schließt das Overlay" data-opentext="Overlay 1 öffnen (Modal)" data-closetext="Overlay 1 schließen" data-title="Overlay Titel im Modal"><span class="text">Click to toggle (Layout: modal)</span></button>

Beispielcontainer :


<div id="overlay02" style="display: none;" >
    <!-- Place your content here to show inside overlay body -->
    <h3>Overlay 2 Content</h3><p>Lorem ipsum dolor sit amet.<br><a href="#" class="more">Test</a></div>

Inhalt laden via "data-ajaxurl"

<button type="button" class="js-flyin-overlay-toggler" data-layout="flyin" data-ajaxurl="/patternlab/public/dummy/html/ajaxdummy.html" data-auralopentext="Click to open overlay" data-auralclosetext="Click to close overlay" data-opentext="Open" data-closetext="Close" data-title="Overlay title"><span class="text">Click to toggle</span></button>

Flyin Overlays mit Hilfetexten in Kombination mit Forms

   <div class="form-group">
        <label for="myInputField7032" class="form-label ">
            Tooltip Test Neu  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>

            <a role="button" class="js-formhelp-flyin-overlay qmark-icon" title="Hilfe" data-original-title="Hier ist der Hilfetext." data-title="Hilfe" href="#" >?</a>
        </label> 
        <input class="form-control" required aria-required="true" id="myInputField7032" type="text" name="myInputField7032">
    </div>
 
   <div class="form-group">
        <label for="myInputField8313" class="form-label ">
            Tooltip Test Alt (Imperia form class)  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>

            <a class="tooltip-wrapper js-tooltip-wrapper" title="Hilfe" data-original-title="Hilfetext" data-rel="tooltip" data-title="Hilfe" onclick="return false;" data-title="Hilfe" href="#"><span class="qmark-icon">?</span></a>
        </label> 
        <input class="form-control" required aria-required="true" id="myInputField8313" type="text" name="myInputField8313">
    </div>

Tests