Barmer Fractal

Modal: Video 

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

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

            <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 (stringToPartial partials.figure) 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,
    "showConsent": false
  },
  "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"
      }
    },
    "figure": "figure-video",
    "videoFigure": {
      "switches": {
        "hasHeadline": false,
        "hasFigcaption": false
      }
    }
  },
  "viewtypes": {
    "specifier": "modal--video"
  }
}

No notes defined.