Barmer Fractal

Modal 

<div class="m-modal " role="dialog" aria-modal="true" id="" aria-labelledby="" aria-describedby="" hidden>
    <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>

        <i class="a-icon " aria-hidden="true"></i>

        <div class="modal__text">Modal Text</div>

        <div class="modal__actions">
            <button class="a-btn btn--secondary js-close-modal js-modal-secondary" type="button">Button</button>

            <button class="a-btn btn--primary js-close-modal js-modal-primary" type="button">Button</button>

        </div>
    </div>
    <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 '@icon' partials.dialogIcon merge=true}}

    <div class="modal__text">{{{ content.text }}}</div>

    <div class="modal__actions">
      {{#switches.secondaryButton}}{{ render '@button--secondary' partials.secondaryButton merge=true }}{{/switches.secondaryButton}}
      {{#switches.primaryButton}}{{ render '@button--primary' partials.primaryButton merge=true }}{{/switches.primaryButton}}
    </div>
  </div>
  <div class="modal__background" aria-hidden="true"></div>
</div>
 
{
  "switches": {
    "hidden": true,
    "dialogIcon": false,
    "closeButton": true,
    "primaryButton": true,
    "secondaryButton": true
  },
  "content": {
    "id": "",
    "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"
      }
    }
  }
}

No notes defined.