Modal windows

Basics

Modal windows can be created in the default theme by using the modals.js plugin.

You can use the plugin to create modal windows whose contents will be fetched from the theme's directory or directly from an online store's /interface access points by using AJAX requests.

The modals.js plugin uses the jQuery plugin Magnific Popup in the background. You can use all of Magnific Popup's settings with the plugin.

See also the instructions for Magnific Popup.

Plugin initialization and settings

In the default theme, the modals.js plugin is initialized in the following way:

MCF.Modals.init({
	tClose: MCF.Locales.get('close'),
	tLoading: MCF.Locales.get('loading'),
	gallery: {
		tPrev: MCF.Locales.get('previous'),
		tNext: MCF.Locales.get('next')
	}
});

In the example, texts for the modal close button and loading stage are retrieved from the theme's language file by using Magnific Popup's tClose and tLoading parameters. If the modal window contains something like an image gallery, its previous/next buttons will use the text tPrev and tNext.

Once the plugin has been initialized, it will automatically set links of a certain type to open modal windows. See the next section to learn more.

Creating a modal window

To create a modal window, you'll need a helper file from which the window's contents will be loaded as well as a link for displaying the modal window.

The sample link below will retrieve the file /helpers/modals/example.html from the theme directory and display its contents in a modal window:

<a data-modal data-modal-helper="helpers/modals/example">Open a modal window</a>

You can also fetch contents into the modal window by directly calling the access point of the desired Interface tag:

<a data-modal data-modal-interface="Products?category=1&helper=helpers/list-product">Show products</a>

The example fetches a product list into the modal window. The list's markup is defined in the file /helpers/list-product.html and the products from the product category 1 are set as its contents.

To display a certain page's details in the window, define the output by using the {Helper} tag's attributes:

<a data-modal data-modal-helper="helpers/modals/example&infopage=n">Open a modal window</a>

Below is the same example using the online store's /interface/Helper access point:

<a data-modal data-modal-interface="Helper?infopage=n&file=helpers/modals/example">Show the modal window</a>

In the previous example, the /helpers/modals/example.html file with news page tags is fetched into the modal window.

<h1>{InfoPageName}</h1>
{InfoPageText}

You can also indicate an image file or an entire web page as the modal window's content by indicating its address in the attribute data-modal-helper:

<a data-modal data-modal-helper="https://www.avattava-sivu.com">Open the modal window</a>

Opening modal windows by using JavaScript

By default, the modals.js plugin's modal windows open when the link is pressed, but you can also implement modal windows that can be opened with JavaScript code by using Magnific Popup. In this way, you can display, for instance, scheduled pop-ups in the online store.

To open a modal window, use the command $.magnificPopup.open():

$.magnificPopup.open({
	type: 'ajax',
	items: {
		src: '/interface/Helper?file=/helpers/modals/example&infopage=22'
	}
}, 0);

In the example, the file /helpers/modals/example.html is loaded in the modal window to print the contents of a news page (ID 22).

To close a modal window, use the command $.magnificPopup.close().