Modal
ready

Introduction

Custom dialog/modal

Examples

Notification

close

Oops, something went wrong!

We cannot do what you want for some reason.

<button class="btn btn--primary" data-js="modal-toggle" data-modal-target="#error-modal">Show error notification modal</button>
    <div id="error-modal" class="modal has-overlay " data-js="modal">
      <div class="modal__box  modal__box--panel modal__box--size-w-medium modal__box--size-h-medium">
        <a href="#" class="icon icon--16x16 icon--x-grey modal__close" data-js="modal-close">close</a>
        <div class="modal__content  text-small-medium text-center">
        <h3>Oops, something went wrong!</h3> <p>We cannot do what you want for some reason.</p> <button class="btn btn--primary btn--block btn--block-max-medium" data-js="modal-close">OK</button>
        </div>
      </div>
    </div>

Choice

close

Are you sure you want to do this?

If you leave this thing without saving all your changes, it could mean you lose some information.

<button class="btn btn--primary" data-js="modal-toggle" data-modal-target="#choice-modal">Show choice modal</button>
    <div id="choice-modal" class="modal has-overlay " data-js="modal">
      <div class="modal__box  modal__box--panel modal__box--size-w-medium modal__box--size-h-medium">
        <a href="#" class="icon icon--16x16 icon--x-grey modal__close" data-js="modal-close">close</a>
        <div class="modal__content  text-small-medium text-center">
        <h3>Are you sure you want to do this?</h3><p>If you leave this thing without saving all your changes, it could mean you lose some information.</p><button class="btn btn--primary btn--block btn--block-max-medium" data-js="modal-close">Okay</button><button class="btn btn--secondary btn--block btn--block-max-medium" data-js="modal-close">Cancel</button>
        </div>
      </div>
    </div>

Content

close
Our Terms of Service

These Terms of Service ("Terms of Service") are provided on behalf of Prodigy Finance Limited and its affiliates ("Prodigy Finance", "we", "us", "our"). By using prodigyfinance.com, including any sub-domain thereof (the "Site"), you signify that you have read, understand and agree to be bound by these Terms of Service, regardless of whether you are a registered member of the Service. Please read them very carefully. If you do not wish to be bound by these Terms of Service, you should not access or use the Site. In addition to these Terms of Service, you may enter into other agreements with us that will govern your use of the products and services offered on the Site. If there is any contradiction between these Terms of Service and another agreement you enter into that is applicable to a product or service offered on the Site then the other agreement will take precedence as it applies to the product or service.

Eligibility

This Site is intended solely for users who are 18 years of age or older, and any registration or use of the Site by anyone under 18 is unauthorised and in violation of these Terms of Service. By using the Site, you represent you are 18 or older and that you agree to and to abide by all of the terms and conditions of these Terms of Service. If you violate any of these Terms of Service, or violate any other agreement with us, we may terminate your registration, delete your loan listing and any content or information that you have posted on the Site and/or prohibit you from using or accessing our products and services or the Site.

Eligibility

This Site is intended solely for users who are 18 years of age or older, and any registration or use of the Site by anyone under 18 is unauthorised and in violation of these Terms of Service. By using the Site, you represent you are 18 or older and that you agree to and to abide by all of the terms and conditions of these Terms of Service. If you violate any of these Terms of Service, or violate any other agreement with us, we may terminate your registration, delete your loan listing and any content or information that you have posted on the Site and/or prohibit you from using or accessing our products and services or the Site. 

<button class="btn btn--primary" data-js="modal-toggle" data-modal-target="#content-modal">Show content modal</button>
    <div id="content-modal" class="modal has-overlay " data-js="modal">
      <div class="modal__box  modal__box--panel modal__box--size-w-large modal__box--size-h-large">
        <a href="#" class="icon icon--16x16 icon--x-grey modal__close in-head" data-js="modal-close">close</a>
        <div class="modal__head">
        <div class="heading heading--3">Our Terms of Service</div>
        </div>
        <div class="modal__content  text-small-medium">
        <p> These Terms of Service ("Terms of Service") are provided on behalf of Prodigy Finance Limited and its affiliates ("Prodigy Finance", "we", "us", "our"). By using prodigyfinance.com, including any sub-domain thereof (the "Site"), you signify that you have read, understand and agree to be bound by these Terms of Service, regardless of whether you are a registered member of the Service. Please read them very carefully. If you do not wish to be bound by these Terms of Service, you should not access or use the Site. In addition to these Terms of Service, you may enter into other agreements with us that will govern your use of the products and services offered on the Site. If there is any contradiction between these Terms of Service and another agreement you enter into that is applicable to a product or service offered on the Site then the other agreement will take precedence as it applies to the product or service. </p> <h3 class="heading--sup">Eligibility</h3> <p class="heading--sub"> This Site is intended solely for users who are 18 years of age or older, and any registration or use of the Site by anyone under 18 is unauthorised and in violation of these Terms of Service. By using the Site, you represent you are 18 or older and that you agree to and to abide by all of the terms and conditions of these Terms of Service. If you violate any of these Terms of Service, or violate any other agreement with us, we may terminate your registration, delete your loan listing and any content or information that you have posted on the Site and/or prohibit you from using or accessing our products and services or the Site. </p> <h3 class="heading--sup">Eligibility</h3> <p class="heading--sub"> This Site is intended solely for users who are 18 years of age or older, and any registration or use of the Site by anyone under 18 is unauthorised and in violation of these Terms of Service. By using the Site, you represent you are 18 or older and that you agree to and to abide by all of the terms and conditions of these Terms of Service. If you violate any of these Terms of Service, or violate any other agreement with us, we may terminate your registration, delete your loan listing and any content or information that you have posted on the Site and/or prohibit you from using or accessing our products and services or the Site. </p>
        </div>
      </div>
    </div>

Without an overlay

close

Oops, something went wrong!

We cannot do what you want for some reason.

<button class="btn btn--primary" data-js="modal-toggle" data-modal-target="#error-modal-2">Show error modal</button>
    <div id="error-modal-2" class="modal  " data-js="modal">
      <div class="modal__box  modal__box--panel modal__box--size-w-medium modal__box--size-h-medium">
        <a href="#" class="icon icon--16x16 icon--x-grey modal__close" data-js="modal-close">close</a>
        <div class="modal__content  text-small-medium text-center">
        <h3>Oops, something went wrong!</h3> <p>We cannot do what you want for some reason.</p> <button class="btn btn--primary btn--block btn--block-max-medium" data-js="modal-close">OK</button>
        </div>
      </div>
    </div>

Inline

Get started with your application

<div id="content-modal" class="modal  is-static" >
      <div class="modal__box  modal__box--panel modal__box--size-w-medium">
        <div class="modal__content  modal__content--fat">
        <form><h1 class="heading heading--3 heading--sub heading--sup">Get started with your application</h1><div class="form-field" data-js="form-field"> <label for="first-name" class="form-field__label">First Name</label> <input id="first-name" name="first-name" class="input-text" type="text"> </div> <div class="form-field form-field--space-y text-center"> <input type="submit" class="btn btn--secondary" value="Create your account"> </div></form>
        </div>
      </div>
    </div>

Full-screen

close

These Terms of Service ("Terms of Service") are provided on behalf of Prodigy Finance Limited and its affiliates ("Prodigy Finance", "we", "us", "our"). By using prodigyfinance.com, including any sub-domain thereof (the "Site"), you signify that you have read, understand and agree to be bound by these Terms of Service, regardless of whether you are a registered member of the Service. Please read them very carefully. If you do not wish to be bound by these Terms of Service, you should not access or use the Site. In addition to these Terms of Service, you may enter into other agreements with us that will govern your use of the products and services offered on the Site. If there is any contradiction between these Terms of Service and another agreement you enter into that is applicable to a product or service offered on the Site then the other agreement will take precedence as it applies to the product or service.

Eligibility

This Site is intended solely for users who are 18 years of age or older, and any registration or use of the Site by anyone under 18 is unauthorised and in violation of these Terms of Service. By using the Site, you represent you are 18 or older and that you agree to and to abide by all of the terms and conditions of these Terms of Service. If you violate any of these Terms of Service, or violate any other agreement with us, we may terminate your registration, delete your loan listing and any content or information that you have posted on the Site and/or prohibit you from using or accessing our products and services or the Site.

Eligibility

This Site is intended solely for users who are 18 years of age or older, and any registration or use of the Site by anyone under 18 is unauthorised and in violation of these Terms of Service. By using the Site, you represent you are 18 or older and that you agree to and to abide by all of the terms and conditions of these Terms of Service. If you violate any of these Terms of Service, or violate any other agreement with us, we may terminate your registration, delete your loan listing and any content or information that you have posted on the Site and/or prohibit you from using or accessing our products and services or the Site. 

<button class="btn btn--primary" data-js="modal-toggle" data-modal-target="#fullscreen-modal">Show fullscreen modal</button>
    <div id="fullscreen-modal" class="modal has-overlay " data-js="modal" data-modal-fs="true">
      <div class="modal__box  modal__box--panel modal__box--size-w-large modal__box--size-h-large">
        <a href="#" class="icon icon--16x16 icon--x-grey modal__close" data-js="modal-close">close</a>
        <div class="modal__content  text-small-medium">
        <p> These Terms of Service ("Terms of Service") are provided on behalf of Prodigy Finance Limited and its affiliates ("Prodigy Finance", "we", "us", "our"). By using prodigyfinance.com, including any sub-domain thereof (the "Site"), you signify that you have read, understand and agree to be bound by these Terms of Service, regardless of whether you are a registered member of the Service. Please read them very carefully. If you do not wish to be bound by these Terms of Service, you should not access or use the Site. In addition to these Terms of Service, you may enter into other agreements with us that will govern your use of the products and services offered on the Site. If there is any contradiction between these Terms of Service and another agreement you enter into that is applicable to a product or service offered on the Site then the other agreement will take precedence as it applies to the product or service. </p> <h3 class="heading--sup">Eligibility</h3> <p class="heading--sub"> This Site is intended solely for users who are 18 years of age or older, and any registration or use of the Site by anyone under 18 is unauthorised and in violation of these Terms of Service. By using the Site, you represent you are 18 or older and that you agree to and to abide by all of the terms and conditions of these Terms of Service. If you violate any of these Terms of Service, or violate any other agreement with us, we may terminate your registration, delete your loan listing and any content or information that you have posted on the Site and/or prohibit you from using or accessing our products and services or the Site. </p> <h3 class="heading--sup">Eligibility</h3> <p class="heading--sub"> This Site is intended solely for users who are 18 years of age or older, and any registration or use of the Site by anyone under 18 is unauthorised and in violation of these Terms of Service. By using the Site, you represent you are 18 or older and that you agree to and to abide by all of the terms and conditions of these Terms of Service. If you violate any of these Terms of Service, or violate any other agreement with us, we may terminate your registration, delete your loan listing and any content or information that you have posted on the Site and/or prohibit you from using or accessing our products and services or the Site. </p>
        </div>
      </div>
    </div>

Auto close if window resized

close

Resizing the window to less than 400px will automatically close this modal

<button class="btn btn--primary" data-js="modal-toggle" data-modal-target="#max-width-modal">Show closing modal</button>
    <div id="max-width-modal" class="modal has-overlay " data-js="modal" data-modal-max-visible-width="400">
      <div class="modal__box  modal__box--panel modal__box--size-w-large modal__box--size-h-large">
        <a href="#" class="icon icon--16x16 icon--x-grey modal__close" data-js="modal-close">close</a>
        <div class="modal__content  text-small-medium">
        <p>Resizing the window to less than 400px will automatically close this modal</p>
        </div>
      </div>
    </div>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_modal.scss
  • src/styles/components/elements/_icon.scss
  • src/scripts/modules/jquery.pfModal.js

Usage

Class/JavaScript Hook Description Required?
.modal This is the outer-most class for a modal block. Required. Remember to add an id attribute if using a JS hook.
.has-overlay Placed alongside the .modal class, if you want the open modal to have a dark overlay over the page. Optional.
.is-static Placed alongside the .modal class, if you want the modal to always be open, and appear within the page, instead of on top of the page. Optional.
.in-head Placed on the .modal__close element, if the modal has a .modal__head so it sits better vis-à-vis the head styling. Optional.
.modal__box Placed within the .modal. This may contain a .modal__head, .modal__content, and .modal__foot Required.
.modal__box--panel Styles the .modal__box to appear as a panel. Optional.
.modal__box--size-w-medium Styles the .modal__box to have a medium-sized maximum width. Optional.
.modal__box--size-w-large Styles the .modal__box to have a large-sized maximum width. Optional.
.modal__box--size-h-medium Styles the .modal__box to have a medium-sized maximum height. Optional.
.modal__box--size-h-large Styles the .modal__box to have a large-sized maximum height. Optional.
.modal__head The header wrapper for the modal. Optional.
.modal__content The content wrapper for the modal. Required.
.modal__content--centered Centers all text and images. Optional.
.modal__foot The footer wrapper for the modal. Optional.
.modal__close Positions a close icon in the top-right corner of the modal. Usually placed on an SVG icon. Optional.
.modal-is-open Applied automatically through JS to the body tag to prevent scrolling when the modal is open. Optional.
[data-js='modal'] This hook is placed on the modal itself. Only required if not using an 'inline' modal. Required.
[data-js='modal-toggle'] Use this JavaScript hook on the element that will trigger a modal to open. Required.
[data-modal-target='#MODAL_ID'] Use this JavaScript hook on the element that will trigger a modal to open. This will open the modal with the ID of MODAL_ID. Required.
[data-js='modal-close'] Use this JavaScript hook on the element that will close any open modals. More than one of these may be used at a time. Required.
[data-modal-max-visible-width='PIXELS'] Using this JavaScript hook on the modal element will force the modal to close if the window is resized to anything larger than the PIXELS width. Optional.
[data-modal-fs='true'] Using this JavaScript hook on the modal element will force the modal into fullscreen view. Optional.
$.pfModal.show('#selector'); Open a modal programatically. Pass in an HTML selector or a jQuery object. Optional.
$.pfModal.hide(); Hides all currently open modals. Optional.
$.pfModal.closeAll(); Hides all currently open modals. Optional.