Back to blue

Lightweight Modal Component

Base component to include in different projects with opportunity to extend

Open Modal
Open Local Modal

Params variations:

XS SM MD LG
Without header

Custom drawer:

Custom - custom drawer with alert on init callback

Iframe callbacks:

<a href="#" data-ca-modal-type="iframe" data-ca-modal-name="The Main Iframe Modal" data-ca-modal-size="lg" // optional data-ca-modal-hide-header="true" // optional data-ca-modal-src="https://es6.io/" // specific param >Open Modal</a>

Base component to include in different projects with opportunity to extend

How to init

Make sure to include the CSS and JS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_modal.css') }}" /> <script src="{{ static("js/ca_styleguide_modal.js") }}"></script>

Now window.caModal is an instance of the modal component

Params to open modal

  1. *type: string - required the name of the drawer
  2. name: string - name for the modal window header (default: "Modal window")
  3. size: "xs"/"sm"/"md"/"lg" - optional size for modal (default: "md")
  4. hideHeader: bool - "true" for true, all other for false (default: "false")
  5. ... - specific params to the drawers
  6. * - required

Using the modal type video

Required params:

  1. *type: string - 'video'
  2. *src: string - the url for the video
  3. * - required

Example:

<button data-ca-modal-type="video" data-ca-modal-size="lg" data-ca-modal-src="//player.vimeo.com/video/234894856?autoplay=1"> <your SVG play icon> ... </your SVG play icon> </button>

How to extend with different modal drawers types

Modal component consists of base modal manager and content drawers.
The base modal manager is basic component to manipulate with modal,
run interface and bind events. Content drawer is a function with
type name string that returns content from input params.

Example:

// ES6: iframeDrawer(params) { return `<iframe src="${params.src}" />`; } iframeInit(params) { /// this - rendered element, params - initing params } var defaultParams = {size: "md", hideHeader: true} //// the base params for this type of modal will be overwritten by concrete modal call window.caModal.registerDrawer('iframe', iframeDrawer, iframeInit, defaultParams);

Here we’ve registered default iframe drawer that registered in basic
initialised component.

It will serve the follow links:

The modal box will have additional class for ca-modal ca-modal--iframe(name of the drawer)

<a data-ca-modal-type="iframe" data-ca-modal-src="/"> Open Modal </a>

Attributes are being converted by the next cammelCase rule without prefix:

  • data-ca-modal-type => params.type
  • data-ca-modal-name => params.name
  • data-ca-modal-src-first-box => params.srcFirstBox

RegisterDrawer method could be executed after initialising.


Helpful methods

  • _processTarget(element) - simulating click on the element as target
  • loadModal(params) - load and open modal from params
  • showModal() - just fade in prepared modal
  • hideModal() - fade out modal window

Manipulation from iframe

Methods

There is two ways to manipulate the iframe from inside the iframe:

  • You can create a dispatch the custom events directly into your iframe code.
  • You can use ca_styleguide_modal_iframe_events.js helper, and just add js-ca-modal-event class to the trigger element, and a data-ca-modal-event="" attribute with the configuration params inside an object:
    • event: The custom event to trigger
    • params: The configuration parameters needed for each custom event.

Closing the modal

To manipulate modal window from iframe (during login or registration process)
there is event aimed to close modal:

var event = document.createEvent("CustomEvent"); event.initCustomEvent('closeParentModal', false, false, {}); window.parent.document.dispatchEvent(event); Using the helper <a href="#" class="js-ca-modal-event" data-ca-modal-event='{"event":"closeParentModal"}'>close</a>

Reloading the modal

To replace current opened modal with new call next event:

var event = document.createEvent("CustomEvent"); event.initCustomEvent('replaceParentModal', false, false, { type: 'iframe', name: 'Replaced modal', src: 'https://es6.io/' size: 'lg' }); window.parent.document.dispatchEvent(event); Using the helper <a class="js-ca-modal-event" data-ca-modal-event='{"event":"replaceParentModal", "params": {"type": "iframe", "name": "Replaced modal", "src": "https://es6.io/", "size": "lg"}}'>Reload</a>

Manipulating the header

To change the title of the modal header, you can call the custom Event changeHeaderModal. You can use the following parameters:

  • name:(String) To change the title text.
  • hideHeader:(Boolean) To hide or show the header. (True for hiding, False for showing)

Both parameters are optional, and you can use only the one you need.


Changing the header text

For changing the header text, you can use only the name param

var event = document.createEvent("CustomEvent"); event.initCustomEvent('changeHeaderModal', false, false, { name: 'New title text', }); window.parent.document.dispatchEvent(event); Using the helper <a class="js-ca-modal-event" data-ca-modal-event='{"event":"changeHeaderModal", "params": {"name": "Title changed"}}'>Change title text</a>

Hiding or showing the header

For hiding or showing the header, you can use only the hideHeader param

var event = document.createEvent("CustomEvent"); event.initCustomEvent('changeHeaderModal', false, false, { hideHeader: true, }); window.parent.document.dispatchEvent(event); Using the helper <a class="js-ca-modal-event" data-ca-modal-event='{"event":"changeHeaderModal", "params": {"hideHeader": false}}'>Show header</a>

Modal events and state

We have added two events and a isOpen state to know when the modal has been opened or closed. You can access the state of the modal by writing in the console caModal.isOpen and the events listener in case you want to listen for a modal when it was open or closed are:

  • com.consumeraffairs.styleguide.modal.open
  • com.consumeraffairs.styleguide.modal.close