Modal
INFO
A Modal is a dialog box or popup window that is displayed on top of the current page. It is used to display information or to get input from the user. A Modal is always displayed on top of the current page, and the user needs to interact with it before they can go back to the page.
Example Styling
TIP
For a more detailed description of all classes and options, see Panel Module, which is the base for the Modal.
.c-panel.-is-modal[.-is-small, .-is-medium, .-is-large, .-is-extra-large, .-is-fullwidth, .-has-backdrop, .-has-close-btn, .-close-backdrop]> .c-panel__inner> .c-panel__inner__bottom
Modal Title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
WARNING
The following code snippet contains only the inner HTML of the modal with the class .-demo-styling that is only used for styling purposes in the example above! The complete modal code is shown in the next example.
Show Code
<div class="c-panel__inner -demo-styling">
<button class="c-panel__inner__close c-btn -icon-btn -small -flat -link" aria-label="Fenster schließen"></button>
<h2 class="c-headline">
<i class="far fa-file-certificate m-r-s" aria-hidden="true"></i>
Modal Title
</h2>
<p class="-redesign">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<div class="c-panel__inner__bottom h-bg-color">
<button type="button" data-dismiss="modal" class="c-btn -redesign -secondary -icon-left js-abort">
<i class="fas fa-times" aria-hidden="true"></i> Abbrechen
</button>
<button type="button" id="certificate-submit" class="c-btn -redesign -primary -icon-left" disabled data-spinner>
<i class="fas fa-check" aria-hidden="true"></i> Speichern
</button>
</div>
</div>Example Usage
TIP
Based on Panel.js.
- The Modal can be opened by clicking the trigger element, which has an attribute
data-target='#panelID"referring to the panel-ID - The Panel needs the classes
.c-panel.-is-modal - The Modal can be closed by clicking the close button, the backdrop (if enabled) or by pressing the Escape key.
- Always use the
aria-labeloraria-labelledbyattribute to provide a label for the modal.
Modal Without Backdrop
.c-panel.-is-modal.-close-backdrop
Example Modal
This modal has no close button but is dismissible by clicking outside of it or pressing the escape key.
Show Code
<button class="c-btn -secondary -small" data-target="#modal-example">
Open Modal
</button>
<div id="modal-example" aria-labelledby="modal-headline" class="c-panel -is-modal -is-medium -close-backdrop">
<div class="c-panel__inner">
<h3 class="c-headline m-b-s" id="modal-headline">
Example Modal
</h3>
<p>
This modal has no close button but is dismissible by clicking outside of it or pressing the escape key.
</p>
</div>
</div>Modal With Backdrop and Close Button
.c-panel.-is-modal.-has-backdrop.-has-close-btn
Modal with Backdrop
This modal has a close button and is not dismissible by clicking outside of it.
Show Code
<button class="c-btn -secondary -small" data-target="#modal-example-backdrop">
Open Modal with Backdrop
</button>
<div id="modal-example-backdrop" aria-labelledby="modal-headline-backdrop" class="c-panel -is-modal -is-medium -has-close-btn -has-backdrop">
<div class="c-panel__inner">
<h3 class="c-headline m-b-s" id="modal-headline-backdrop">
Modal with Backdrop
</h3>
<p>
This modal has a close button and is not dismissible by clicking outside of it.
</p>
</div>
</div>Access Restricted Link
TIP
Links with the classes accessRestrictedLink or accessRestrictedNavLink open a Login Modal (used on the pharma4u.de website, see LoginModal.js -> still in use?).
Premium Login
Melden Sie sich für Ihren persönlichen Premium-Bereich auf pharma4u.de an.
Noch keinen Zugang? Jetzt registrieren
Show 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" aria-labelledby="modal-headline-login" class="c-panel -is-modal -is-medium -has-close-btn -has-backdrop -close-backdrop">
<div class="c-panel__inner">
<div class="tx-felogin-pi1">
<p class="c-headline h3 m-b-s" id="modal-headline-login">
Premium Login
</p>
<p>
Melden Sie sich für Ihren persönlichen Premium-Bereich auf pharma4u.de an.
</p>
<p class="m-b-s">
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 -->