Barmer Fractal

Modal: Video With Consent 

<div class="m-modal modal--video" role="dialog" aria-modal="true" id="bm-video" aria-labelledby="" aria-describedby="">
    <div class="modal__body">
        <button class="a-btn btn--close modal__close-button js-close-modal" type="button" aria-label="Schließt das Pop-up"><i class="a-icon icon--close" aria-hidden="true"></i></button>

        <div class="m-consent a-richtext richtext--article consent--in-modal">
            <h2>Externe Inhalte anzeigen</h2>
            <p>Sie können sich an dieser Stelle externe Inhalte anzeigen lassen.</p>
            <p>Ich bin damit einverstanden, dass personenbezogene Daten an Drittplattform übermittelt werden. Mehr dazu in unserer <a class="bm-richtext-link" href="#">Datenschutzerklärung</a>.</p>

            <label class="a-toggle js-consent-toggle" for="toggle-checkbox-video">
                <span class="toggle__text-label">Externe Inhalte zulassen</span>
                <input class="toggle__checkbox" type="checkbox" id="toggle-checkbox-video" />
                <span class="toggle__slider" data-text-enabled="ja" data-text-disabled="nein">
                    <span class="toggle__indicator"></span>
                </span>
                <span class="sr-only toggle__alert" aria-live="polite" data-text-checked="Externe Inhalte sind jetzt zugelassen" data-text-unchecked="Externe Inhalte sind jetzt geblockt"></span>
            </label>

        </div>

        <figure class="m-figure-video figure-video--external">

            <template class="figure-video__template"></template>

        </figure>

    </div>
    <span class="sr-only modal__end-text" tabindex="0">Sie verlassen das Video</span>
    <div class="modal__background" aria-hidden="true"></div>
</div>
 
<div class="m-modal {{viewtypes.specifier}}" role="dialog" aria-modal="true" id="{{content.id}}" {{# content.ariaLabelledby}}aria-labelledby="{{this}}"{{/content.ariaLabelledby}} {{#content.ariaDescribedby}}aria-describedby="{{this}}"{{/content.ariaDescribedby}} {{#switches.hidden}}hidden{{/switches.hidden}}>
  <div class="modal__body">
    {{#switches.closeButton}}
      {{ render '@button--close' partials.closeIconButton merge=true}}
    {{/switches.closeButton}}

    {{ render '@consent' partials.consent merge=true}}

    {{ render '@figure-video--modal' this.partials.videoFigure merge=true }}

  </div>
  <span class="sr-only modal__end-text" tabindex="0">{{{ content.modalEndText }}}</span>
  <div class="modal__background" aria-hidden="true"></div>
</div>
 
{
  "switches": {
    "hidden": false,
    "dialogIcon": false,
    "closeButton": true,
    "primaryButton": true,
    "secondaryButton": true
  },
  "content": {
    "id": "bm-video",
    "ariaLabelledby": "",
    "ariaDescribedby": "",
    "text": "Modal Text",
    "modalEndText": "Sie verlassen das Video"
  },
  "partials": {
    "dialogIcon": {},
    "closeIconButton": {
      "viewtypes": {
        "specifier": "btn--close modal__close-button js-close-modal"
      },
      "content": {
        "ariaLabel": "Schließt das Pop-up"
      }
    },
    "primaryButton": {
      "viewtypes": {
        "specifier": "btn--primary js-close-modal js-modal-primary"
      }
    },
    "secondaryButton": {
      "viewtypes": {
        "specifier": "btn--secondary js-close-modal js-modal-secondary"
      }
    },
    "consent": {
      "viewtypes": {
        "specifier": "consent--in-modal"
      },
      "partials": {
        "toggle": {
          "content": {
            "id": "toggle-checkbox-video"
          }
        }
      }
    },
    "videoFigure": {
      "switches": {
        "hasHeadline": false,
        "hasFigcaption": false,
        "hasToggle": false
      },
      "viewtypes": {
        "specifier": "figure-video--external"
      }
    }
  },
  "viewtypes": {
    "specifier": "modal--video"
  }
}

No notes defined.