Home/ Tutorials/ Using the iziModal library in your web project

Using the iziModal library in your web project

Pinegrow makes adding a JavaScript library into our projects easy! Here is an example of using the “iziModal” library to add modals to a plain HTML project.

We will be continuing from our last tutorial where we learned how to add modals to a Bootstrap 4 project. In this case, we will be adding modals to a plain HTML project.

This will require a little bit more hands-on programming since we don’t have a framework providing all of the background code. We will be using a really nice JavaScript library called ‘iziModal’ that has some good built-in features, but is fairly light-weight at 132kb minified.

Screenshot of the iziModal homepage
iziModal is a really nice, lightweight modal JS library.

Let’s get started!

Prefer to read? Scroll past the video.

This tutorial is available in video and textual form. Watch the two videos, or continue reading if you prefer to read. Of course, you can also do both!

Note: The video includes setting the project page up and using iziModal. If you want to skip the optional project set-up, fast-forward the video to the 6 minute mark.

1. Create or open a project

For the purposes of this tutorial I’m going to first put together a quick gallery page. Obviously you won’t have to do this to add modals to your own project, but I think it nicely illustrates how easy it is to put together a page in Pinegrow.

Note: These first steps are just for the purposes of the tutorial. You can skip to step 3 to implement iziModals in your own project.

Open a new HTML page and save it as a project by first clicking on the “New page or project” button, then selecting “Plain HTML” as the project type and the “index.html” template.

Screenshot of plain HTML template selection
Select a plain HTML template.

Save the project and click “Yes” on the resulting pop-up.

Screenshot of the "Open as project" modal.
Open the page as a project to create a folder for resources.

2. Create a quick gallery page

Drag a div to the page and create and add a new class from the Style panel called gallery-grid.

Screenshot of the Styles panel and creation of a new rule.
Create a ‘.gallery-grid’ ruleset.

With our new rule selected, scroll down to the “Position and display” section by clicking on the second icon from the left. Change the display to “Grid”.

Screenshot of the "Display" selection of the visual editor.
Select “Grid” for the display.

Next, scroll down to the “Grid Container” section by clicking on the last icon at the top of the visual editor. Set the “Template columns” to “repeat(4, 1fr)” and the “Column gap” to “10px”.

Screenshot of the grid container section of the visual editor
Style the gallery CSS grid properties.

Next, drag a new div into our existing on-page div. Create a new class and ruleset called “.gallery-item”. Use the visual editor to add a 1px wide, solid, black border. Additionally, set the text-align to center.

To create our card, drag an img element inside our “gallery-item” div. Give it a class of “.thumb-styling” and set the width to “100%” and the height to “auto”.

Finally, add a p element for the picture title and a button for opening our modal in the same div. Add some text to the button like “view”.

Screenshot of gallery item selected for duplication
Select of image card for duplication.

Now duplicate the gallery-item div three times for a total of four image cards by clicking on the duplicate icon (two circles with a plus) in the tree with the ‘div.gallery-grid’ selected.

Next, I’m going to grab images from each card from Unsplash using the built-in tool. Select one of the image elements. Then, under the “Page” menu select “Get free stock photos from Unsplash…”

Screenshot on the Pinegrow Unsplash image selection tool.
Pinegrow makes adding free stock images easy.

I want all the resulting images to be the same size and square when shown as a thumbnail , so I’m going to specify a width and height for my images of 400 x 400. This will give a link to the image cropped to that size.

Screenshot of selecting Unsplash image custom size.
Select cropped images so they are all the same size in our gallery.

3. Add in our libraries

Next, we need to add in the iziModal library and styling – navigate to https://izimodal.marcelodolza.com/ and click on the download button.

Screenshot of the iziModal Download button location.
Download the iziModal library files.

Save the archive and unpack it.

Screenshot of the files to be copied from the iziModal archive
Copy these two files to your project.

From the css folder, copy the “iziModal.min.css” file into your project css folder.

From the js folder copy the “iziModal.min.js” file into your project. I’m going to make a new folder in my project named “js” to hold the file.

In Pinegrow, refresh your project view in the Project tab by right-clicking on the project name.

Screenshot of the project structure.
Our current project file structure.

Drag the iziModal.min.css file to the page view to attach it.

For the iziModal library to work it also needs jQuery. We will add that on the page before the izimodal.min.js, otherwise we will get an error.

We’ll add it as a CDN, rather than hosting the jQuery in our own project Navigate to https://code.jquery.com/ and click on the jQuery 3.x slim, minified link.

Screenshot of the jQuery CDN
Select the slim, minified for quicker load.

Copy the code from the modal by clicking the button on the right.

Screenshot of the jQuery code link.
Click the button to copy to the clipboard.

Back in the Pinegrow Library panel, first paste the copied code into the code box at the top. Second, drag the resulting element to the page.

Screenshot of adding jQuery through the code box.
Adding jQuery using the code box.

Finally, drag the iziModal.min.js to the page view. Your page should now have two scripts at the bottom. Again, jQuery needs to be loaded and appear on the page before the iziModal.js file.

4. Adding a Modal and trigger

Like with Bootstrap modals, the two things that we need to add to the page are a modal to be displayed and a trigger. As with the last tutorial, we will use the modal to display a large view of our image.

Drag a div to the end of the page after the “gallery-grid” div. Give the div a unique id – I’ll use “OceanView”. Open the Attributes panel and scroll down to the Info section. Add “OceanView” into the Id box.

Screenshot of the Info box.
Give your modal a unique identifier.

Next add an image tag inside the div. I’ll populate the image element with the same photo that I selected for my first card, but at the larger size.

Again, I’ll use the Pinegrow Unsplash image tool from “Page” -> “Get free stock images from Unsplash…”. This time select the “Regular” size link.

Screenshot of new modal div with img.
Add a regular size image to your modal.

We could do any other styling that we want or add any other elements inside the div. In this case, I’m going to use the close button and title features of iziModal, so I don’t need to add these.

To tell iziModal that our new div is a modal, we have to write a small amount of code.There are a couple of ways that we could do this. We could simple use the “Insert Code” box from the “Elements” panel, or create a stand alone page for all our code. I’m going to go that route.

In the project window create a new file in our js folder. In the Projects tab, right-click on the js folder and select “Create a new file…” I’m creating a file named “modal.js” Drag the file to the page to attach it.

Screenshot of creating a new file for our JavaScript.
Create a new file for our JS.

Double click on the file in the Project panel to open the code editor, or open the file in an external editor.Add the following code to the page:

$(document).ready( function () {
Screenshot of the addition of our JS.
If our document is ready, initialize that modal!

This will initialize our modal. Now, if you make JavaScript active on the page by clicking the JS icon above the Page view the modal will disappear! To get it back for additional styling, just turn JS off by clicking the icon. You may need to hit the refresh icon next to the JS icon.

To use the built in iziModal title and close button we need to add an attribute to the modal div. Either turn JS off and select the div in the page view, or select the div in the tree.

In the Properties panel, scroll down to the “Attribute Editor”.

Click on the “Add attribute” button. For a title, add the attribute “data-izimodal-title” with any value you would like. I’ll add “Ocean view”.

Screenshot of the Attributes Editor
Adding a title by attribute to an iziModal pop-up.

Next, we need to add a trigger. There are two different ways to accomplish this.

The first way is to add attributes to an existing button or link.

Select the button for the first card in the tree or page view. Once again open the Attribute Editor in the Properties panel. Add the attribute ‘data-izimodal-open’ with a value equal to the unique identifier of your modal. In this case, the OceanView id, so ‘#OceanView”.

If we open a preview of our page we can see it now works! Note, if we simulate a click on the page view we won’t see the title bar appear.

Screenshot of the iziModal pop-up
Button-triggered modal.

The second way that we can open the modal is by setting a click listener on the element that we want to use. This allows us to use elements on the page other than a button or link.

Let’s set the thumbnail image up to show the modal. Select the thumbnail photo and give it a unique ID. In the Properties panel under info I’m going to give it an ID of OceanThumb.

Screenshot of adding a unique identifier to the thumbnail.
Give the image trigger a unique identifier.

Reopen the new JS file we made earlier either in the built-in or external code editor.Add the following within the document ready function.

$('#OceanThumb').on('click', function (event) {
Screenshot of custom modal code.
Add the trigger code in the same file as our activation code.

If we open up the page in a preview we can now click on the picture to open the modal!

The iziModal has a number of additional features for including icons, subtitles or changing the opening and closing animations. I encourage you to check out the documentation.

Remember, we can add anything we like to our modal using the tools we already have in Pinegrow. Feel free to add additional text, images, or even buttons to open additional modals!

Discuss this tutorial

Have questions or comments about this tutorial? Let’s talk about it on our forum.

Get in touch

Would you like to see your favorite theme or blocks library featured in the next tutorial? Let us know in the forum or by email!