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 Trigger Element has an attribute data-target='#panelID" referring to the panel-ID
• The Panel needs the classes .c-panel.-is-modal

Modal Without Backdrop

Premium Login

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

Noch keinen Zugang? Jetzt registrieren

Show Code

<button class="c-btn -secondary -small" data-target="#modal-example">
    Open Modal
</button>
<div id="modal-example" class="c-panel -is-modal -is-medium -has-close-btn -close-backdrop">
    <div class="c-panel__inner">
        <h3 class="c-headline m-b-s">
            Premium Login
        </h3>
        <p>
            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

Show Code

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

Access Restricted Link

TIP

Links with the classes accessRestrictedLink or accessRestrictedNavLink open a Login Modal (used on the pharma4u.de website).

.accessRestrictedLink

.accessRestrictedNavLink

Premium Login

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

Noch keinen Zugang? Jetzt registrieren

Benutzername

Passwort

Passwort vergessen?

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" 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">
        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 -->

Vue Component (BasicModal.vue)

Some content here

Show Code and Component Definition

Props

Prop	Type	Default	Description
hasCloseBtn	Boolean	true	Whether to show the close button.
hasBackdrop	Boolean	true	Whether the modal includes a backdrop.
closeBackdrop	Boolean	true	Whether clicking the backdrop closes the modal.
showModal	Boolean	false	Controls the visibility of the modal.
name	String	''	A unique name for the modal. Used for accessibility (e.g., aria-labelledby).
size	String	''	Size of the modal. Accepted values: extra-small, small, medium, large, extra-large, fullwidth.

---

Slots

Slot	Description
Default	Content to be displayed in the modal.

---

Events

Event	Description
open	Emitted when the modal is opened.
close	Emitted when the modal is closed (via any method).

---

Basic Usage

<template>
  <div>
    <button
      type="button"
      class="c-btn -redesign -primary -icon-left"
      data-spinner
      @click="showModal = true">
      <i class="fas fa-check" aria-hidden="true"></i> Open Modal
    </button>

    <BasicModal
      :showModal="showModal"
      :name="'example-modal'"
      @close="showModal = false"
    >
      <p>This is the modal content!</p>
    </BasicModal>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { BasicModal } from '@pharma4u/patternlab'

const showModal = ref(false)
</script>

Advanced Usage

<template>
  <div>
    <button
      type="button"
      class="c-btn -redesign -primary -icon-left"
      data-spinner
      @click="showModal = true">
      <i class="fas fa-check" aria-hidden="true"></i> Open Modal
    </button>

    <BasicModal
      :showModal="showModal"
      :name="'advanced-modal'"
      :size="'large'"
      :hasBackdrop="true"
      :closeBackdrop="false"
      @close="showModal = false"
    >
      <h1 id="modal-title">Advanced Modal</h1>
      <p>This modal does not close when clicking the backdrop.</p>
    </BasicModal>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { BasicModal } from '@pharma4u/patternlab'

const showModal = ref(false)
</script>