England Football

Registration Confirm Modal 

<dialog class="registration-confirm-modal">
    <!-- Modal content -->
    <div class="registration-confirm-modal__content">
        <div class="registration-confirm-modal__header">
            <div class="registration-form-title">
                Are you sure?
            </div>
        </div>
        <div class="registration-confirm-modal__body">
            <div class="registration-form-sub-title">
                If you don’t want to register now you can come back at any time.
            </div>
        </div>
        <div class="registration-confirm-modal__footer">
            <a href="/" class="cta cta--r-primary ">
                <p>Leave</p>
            </a>

            <a href="/" class="cta cta--r-secondary ">
                <p>Cancel</p>
            </a>

        </div>
    </div>
</dialog>

No notes defined.

{
  "modal-title": {
    "copy": "Are you sure?"
  },
  "modal-description": {
    "copy": "If you don’t want to register now you can come back at any time."
  },
  "btn-1": {
    "copy": "Leave"
  },
  "btn-2": {
    "copy": "Cancel"
  }
}
  • Content: 
    const confirmParentElement = document.querySelector(
  '.registration-confirm-modal'
);

export default parentElement => {
  const [secondaryBtn] = parentElement.querySelectorAll(
    '.registration-confirm-modal__footer .cta--r-secondary'
  );

  secondaryBtn.addEventListener('click', e => {
    e.preventDefault();
    parentElement.close();
  });
};

export const handleConfirmPrimaryBtn = callback => {
  callback();
  if (confirmParentElement) {
    confirmParentElement.close();
  }
};

export const conformDialogPrimaryBtn =
  confirmParentElement &&
  confirmParentElement.querySelector(
    '.registration-confirm-modal__footer .cta--r-primary'
  );

export const setConfirmDialogPrimaryCtaText = text => {
  if (confirmParentElement) {
    confirmParentElement.querySelector(
      '.registration-confirm-modal__footer .cta--r-primary'
    ).innerText = text;
  }
};

export const setConfirmDialogSecondaryCtaText = text => {
  if (confirmParentElement) {
    confirmParentElement.querySelector(
      '.registration-confirm-modal__footer .cta--r-secondary'
    ).innerText = text;
  }
};
export const setDialogTitle = title => {
  if (confirmParentElement) {
    confirmParentElement.querySelector(
      '.registration-confirm-modal .registration-form-title'
    ).innerText = title;
  }
};

export const setDialogSubTitle = subtitle => {
  if (confirmParentElement) {
    confirmParentElement.querySelector(
      '.registration-confirm-modal .registration-form-sub-title'
    ).innerText = subtitle;
  }
};
  • URL: /components/raw/registration-confirm-modal/registration-confirm-modal.js
  • Filesystem Path: src/library/modules/registration/registration-confirm-modal/registration-confirm-modal.js
  • Size: 1.5 KB
  • Content: 
    .registration-confirm-modal {
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid #888;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 8px;

  &::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
  }
  &__content {
    position: relative;
    background-color: white;
    font-size: 26px;
    width: 600px;
    padding: 24px;
    color: black;
    border-radius: 8px;
  }

  /* The Close Button */

  &__header {
    .registration-form-title {
      color: #000;
    }
  }

  &__body {
    .registration-form-sub-title {
      color: #000;
      margin-bottom: 40px;
    }
  }

  &__footer {
    display: flex;
    width: -webkit-fill-available;
    justify-content: space-between;

    .cta--r-primary,
    .cta--r-secondary {
      width: 48%;
    }

    .cta--r-primary {
      border: 1px solid $red;
    }

    .cta--r-secondary {
      border: 1px solid $crest-blue;
    }
  }

  /* Add Animation */
  @-webkit-keyframes slidein {
    from {
      bottom: -300px;
      opacity: 0;
    }

    to {
      bottom: 0;
      opacity: 1;
    }
  }

  @keyframes slidein {
    from {
      bottom: -300px;
      opacity: 0;
    }

    to {
      bottom: 0;
      opacity: 1;
    }
  }

  @-webkit-keyframes fadein {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fadein {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @media screen and (max-width: $mq-medium) {
    & {
      width: 90%;
    }

    &__content {
      width: 100%;
      padding: 16px;
    }

    &__footer {
      flex-direction: column;

      .cta--r-primary {
        margin-bottom: 16px;
      }

      .cta--r-primary,
      .cta--r-secondary {
        width: 100%;
      }
    }
  }
}
  • URL: /components/raw/registration-confirm-modal/registration-confirm-modal.scss
  • Filesystem Path: src/library/modules/registration/registration-confirm-modal/registration-confirm-modal.scss
  • Size: 1.9 KB 
<dialog class="registration-confirm-modal">
  <!-- Modal content -->
  <div class="registration-confirm-modal__content">
    <div class="registration-confirm-modal__header">
      {{render '@registration-form-title' modal-title}}
    </div>
    <div class="registration-confirm-modal__body">
      {{render '@registration-form-sub-title' modal-description}}
    </div>
    <div class="registration-confirm-modal__footer">
      {{render '@cta--r-primary' btn-1 merge="true"}}
      {{render '@cta--r-secondary' btn-2 merge="true"}}
    </div>
  </div>
</dialog>