melt Modal

This module leverages iziModal to add the ablility for buttons and links to trigger modals.

NOTE: You can technically leverage any of iziModal options as data attributes. Read their docs for more information.

Installation

composer require drupal/melt_modal

Basic modal

For basic modal functionality, just add the data-izimodal-open="TARGET" attribute to any button or link. Replace TARGET with a CSS selector that targets the modal the link/button is suppose to open. We recommend using an id if possible.

Underneath the hood, we initialize the modals based on the target value of the data-izimodal-open attribute. This allows us to just leverage the data attributes of the iziModal libary.

Example

<!-- Modal Trigger -->
<a href="#" data-izimodal-open="#cool-modal"> Open </a>

<!-- Modal -->
<div id="cool-modal">

  <!-- ADD CONTENT -->

  <button type="button" data-izimodal-close="true">Close</button>
</div>

3rd party link modal

It's common for sites we build to have a modal popup that alerts the user that they've clicked on a url that'll take them to another website. So we've extended iziModal to handle modals for 3rd party links. There's only 2 requirement:

1. The trigger element should be an <a> and include a valid url in the href.
2. The trigger element should include a data-externallink-continue="TARGET" attribute. This targets the "continue" link in the modal.

Settings

A settings page has been created at admin/config/melt_modal/modal that allows you to:

1. Enable/disable 3rd party link functionality
2. Specify the id of the global modal
3. Whitelist domains to ignore

Example

<!-- External Link Modal Trigger -->
<a href="https://www.meltmedia.com" data-izimodal-open="#external-link-modal" data-externallink-continue=".external-link--continue">Go to external link</a>

<!-- External Link Modal -->
<div id="external-link-modal">

  <!-- ADD CONTENT -->

  <a href="#" class="external-link--continue">OK</a>
  <button type="button" data-izimodal-close="true">Close</button>
</div>

Video modals

There has been a special data-izimodal-video attribute that takes a string of JSON based on some of the options provided. Currently autoplay is the only option available. Each <video> should be a mediaelement instance. If using DX8's video element, then it automatically uses MediaElement.js.

Example

<!-- External Link Modal Trigger -->
<a href="https://www.meltmedia.com" data-izimodal-open="#external-link-modal" data-izimodal-video='{ "autoplay": true}'>Open Modal</a>

<!-- External Link Modal -->
<div id="external-link-modal">

  <video src="myvideo.mp4" width="320" height="240"
		class="mejs__player"
		data-mejsoptions='{"pluginPath": "/path/to/shims/", "alwaysShowControls": "true"}'></video>

  <button type="button" data-izimodal-close="true">Close</button>
</div>

Events

meltmodal:reset

Will destroy all current modal instances and re-initialize them. This is good especially if you're using a JS framework like React, Vue, Angular etc and have a component that renders the modal HTML after melt modal initializes on page load.

Example:

$(window).trigger('meltmodal:reset');

meltmodal:opening

The callback takes a second parameter that contains the state object of meltmodal.

Example

$(window).on('meltmodal:opening', function(evt, meltmodal){
  // Do stuff while the modal is opening.
});

meltmodal:opened

The callback takes a second parameter that contains the state object of meltmodal.

Example

$(window).on('meltmodal:opened', function(evt, meltmodal){
  // Do stuff once the modal is opened.
});

meltmodal:closing

The callback takes a second parameter that contains the state object of meltmodal.

Example

$(window).on('meltmodal:closing', function(evt, meltmodal){
  // Do stuff while the modal is closing.
});

meltmodal:closed

The callback takes a second parameter that contains the state object of meltmodal.

Example

$(window).on('meltmodal:closed', function(evt, meltmodal){
  // Do stuff once the modal is closed.
});

meltmodal:options

The callback takes a second parameter that contains the state object of meltmodal as well as the options.

Example

$(window).on('meltmodal:options', function(evt, meltmodal){
  // Modify meltmodal options
  meltmodal.options.bodyOverflow = false;
});