Modaali-ikkunat

Perusteet

Modaali-ikkunoita luodaan oletusteemassa käyttämällä modals.js-pluginia.

Pluginin avulla voit luoda modaali-ikkunoita, joihin ladataan sisältö teeman hakemistosta tai suoraan verkkokaupan /interface-yhteyspisteistä AJAX-pyynnöillä.

modals.js-plugin käyttää taustalla Magnific Popup -jQuery-pluginia. Voit käyttää pluginilla kaikkia Magnific Popupin omia asetuksia.

Katso myös Magnific Popupin ohjeet.

Pluginin alustaminen ja asetukset

modals.js-plugin alustetaan oletusteemassa seuraavasti:

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

Esimerkissä haetaan Magnific Popupin tClose- ja tLoading-parametreillä teeman kielitiedostosta tekstit modaalin sulkemispainikkeelle ja latausvaiheeseen. Jos modaali sisältää esim. kuvagallerian, sen seuraava/edellinen painikkeilla käytetään tekstejä tPrev ja tNext.

Kun plugin on alustettu, se asettaa automaattisesti määrätynlaiset linkit avaamaan modaali-ikkunoita. Lue lisää seuraavasta kappaleesta.

Modaalin luominen

Tarvitset modaali-ikkunan luomiseksi helper-tiedoston, josta ladataan sisältö ikkunaan, sekä linkin, joka näyttää modaali-ikkunan.

Alla olevalla esimerkki linkillä haettaisiin teemahakemistosta tiedosto /helpers/modals/example.html ja näytettäisiin sen sisältö modaalissa:

<a data-modal data-modal-helper="helpers/modals/example">Avaa modaali</a>

Voit hakea modaaliin sisällön myös kutsumalla suoraan haluamasi Interface-tagin yhteyspistettä:

<a data-modal data-modal-interface="Products?category=1&helper=helpers/list-product">Näytä tuotteet</a>

Esimerkissä haetaan modaaliin tuotelista, jonka merkkaus määritellään tiedostossa /helpers/list-product.html ja jonka sisällöksi haetaan tuoteryhmän 1 tuotteet.

Jos haluat ladata ikkunaan esimerkiksi jonkin tietyn sivun tietoja, määritä tulostettava sisältö {Helper}-tagin attribuuttien avulla:

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

Alla sama esimerkki käyttäen verkkokaupan /interface/Helper-yhteyspistettä:

<a data-modal data-modal-interface="Helper?infopage=n&file=helpers/modals/example">Näytä modaali</a>

Edeltävissä esimerkeissä ladataan modaaliin /helpers/modals/example.html-tiedosto, joka sisältää infosivujen tageja:

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

Voit määrittää modaalin sisällöksi myös kuvatiedoston tai kokonaisen verkkosivun antamalla sen osoitteen attribuutille data-modal-helper:

<a data-modal data-modal-helper="https://www.avattava-sivu.com">Avaa modaali</a>

Modaalin avaaminen JavaScriptin avulla

Oletusarvoisesti modals.js-plugin avaa modaalit linkin klikkauksella, mutta voit toteuttaa Magnific Popupin avulla myös modaaleja, jotka avataan JavaScript-koodilla. Näin voit näyttää verkkokaupassa esim. ajastettuja popupeja.

Käytä modaalin avaamiseen komentoa $.magnificPopup.open():

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

Esimerkissä ladataan modaaliin tiedosto /helpers/modals/example.html, jossa tulostetaan infosivun (ID 22) sisältöä.

Modaali suljetaan komennolla $.magnificPopup.close().