England Football

Registration Confirm Modal 

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

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: 
    export default parentElement => {
  const reDirectUrl =
    'https://www.englandfootball.com/england/mens-senior-team/England-Supporters-Travel-Club';

  const btn1 = parentElement.querySelector(
    '.registration-confirm-modal__footer > .cta--r-primary'
  );

  const btn2 = parentElement.querySelector(
    '.registration-confirm-modal__footer > .cta--r-secondary'
  );

  btn1.addEventListener('click', event => {
    event.preventDefault();
    // eslint-disable-next-line no-param-reassign
    parentElement.style.display = 'none';
    window.location.href = reDirectUrl;
  });

  btn2.addEventListener('click', event => {
    event.preventDefault();
    // eslint-disable-next-line no-param-reassign
    parentElement.style.display = 'none';
  });
};
  • URL: /components/raw/registration-confirm-modal/registration-confirm-modal.js
  • Filesystem Path: src/library/modules/registration/registration-confirm-modal/registration-confirm-modal.js
  • Size: 758 Bytes
  • Content: 
    .registration-confirm-modal {
  display: none;
  align-items: center;
  justify-content: center;

  /* Hidden by default */
  position: fixed;

  /* Stay in place */
  z-index: 1;

  /* Sit on top */
  left: 0;
  top: 0;
  width: 100vw;

  /* Full width */
  height: 100vh;

  /* Full height */
  overflow: hidden;

  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);

  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);

  /* Black w/ opacity */
  -webkit-animation-name: fadein;

  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadein;
  animation-duration: 0.4s;
  border-radius: 8px;

  /* Modal Content */
  &__content {
    position: relative;
    background-color: white;
    width: 600px;
    padding: 24px;
    -webkit-animation-name: slidein;
    -webkit-animation-duration: 0.4s;
    animation-name: slidein;
    animation-duration: 0.4s;
    color: black;
    border-radius: 8px;
  }

  /* The Close Button */

  &__header {
    .registration-form-title {
      margin-top: 50px;
    }
  }

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

  &__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) {
    &__content {
      width: 85%;
      padding: 16px;
    }

    &__header {
      .registration-form-title {
        margin-top: 70px;
      }
    }

    &__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: 2.5 KB 
<div 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>
  </div>