PatternLab (0.1.259)

# Modal

TIP

Based on Panel.js.

  • The Trigger Element has an attribute data-target='#panelID" refering to the panel-ID
  • The Panel needs the classes .c-panel .-is-modal

For more optional CSS Classes and Public Javascript Methods see Molecules/Panel.

open modal without backdrop

Premium Login

Melden Sie sich für Ihren persönlichen Premium-Bereich auf pharma4u.de an.

Noch keinen Zugang? Jetzt registrieren

hide code 
<a class="c-btn -secondary -small -icon-right -icon-arrow" data-target="#modal1">open modal without backdrop</a>
<div id="modal1" class="c-panel -is-modal -is-medium -has-close-btn -close-backdrop">
    <div class="c-panel__inner">
        <h4 class="m-b-s">Premium Login</h4>
        <p class="tiny">Melden Sie sich für Ihren persönlichen Premium-Bereich auf pharma4u.de an.</p>
        <p class="tiny m-b-xs">
            Noch keinen Zugang?
            <a href="allgemein/benutzer/registrieren/" class="c-link">Jetzt registrieren</a>
        </p>
    </div>
</div>

open modal with backdrop

hide code 
<a class="c-btn -primary -small -icon-right -icon-arrow" data-target="#loginModal">open modal with backdrop</a>

TIP

Links with the classes accessRestrictedLink or accessRestrictedNavLink open a Login Modal.

.accessRestrictedLink

.accessRestrictedNavLink

Premium Login

Melden Sie sich für Ihren persönlichen Premium-Bereich auf pharma4u.de an.

Noch keinen Zugang? Jetzt registrieren

hide code 
<div class="h-type-align-center m-t-xl">
   <p>
       <span class="accessRestrictedLink">
           <a class="c-link -icon-right -icon-arrow m-t-m">
               .accessRestrictedLink
           </a>
       </span>
   </p>
   <p>
    <span class="accessRestrictedNavLink">
       <a class="c-link -icon-right -icon-arrow">
           .accessRestrictedNavLink
       </a>
   </span>
   </p>
</div>
<!-- start loginModal -->
<div id="loginModal" class="c-panel -is-modal -is-medium -has-close-btn -has-backdrop -close-backdrop">
    <div class="c-panel__inner">
        <div class="tx-felogin-pi1">
            <h4 class="m-b-s">Premium Login</h4>
            <p class="tiny">Melden Sie sich für Ihren persönlichen Premium-Bereich auf pharma4u.de an.</p>
            <p class="tiny m-b-xs">
                Noch keinen Zugang?
                <a href="allgemein/benutzer/registrieren/" class="c-link">Jetzt registrieren</a>
            </p>
            <div class="tx-felogin-pi1">
                <form action="apotheker/plausi-check/login/" method="post" onsubmit="" id="loginModalForm">
                    <fieldset>
                        <div class="c-float-container">
                            <label for="user2">Benutzername:</label>
                            <input type="text" class="c-input c-float-input h-fullwidth" data-placeholder="" id="user2" name="user" value="">
                        </div>
                        <div class="c-float-container">
                            <label for="pass2">Passwort:</label>
                            <input type="password" class="c-input c-float-input h-fullwidth" id="pass2" name="pass" value="">
                        </div>
                        <span class="login-forgot h-block m-t-m h-type-align-right"><a href="apotheker/plausi-check/login/?tx_felogin_pi1%5Bforgot%5D=1" class="link -tiny -secondary">Passwort vergessen?</a></span>
                        <button class="c-btn -small -secondary h-fullwidth m-t-s" type="submit" name="submit">
                            Anmelden
                        </button>
                        <div class="felogin-hidden">
                            <input type="hidden" name="logintype" value="login">
                            <input type="hidden" name="pid" value="707">
                            <input type="hidden" name="redirect_url" value="">
                            <input type="hidden" name="tx_felogin_pi1[noredirect]" value="1">
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- end loginModal -->

← Multi-Search →