Modaal

How to use Modaal with WordPress

Modaal is an accessible dialog window library for all humans that makes it easy to create “pop-ups”, or modal windows with jQuery. In this post I’m going to show you how to use this in WordPress.

Here are the steps to getting started:

  1. Head over to GitHub and download or fork a copy of the source code.
  2. Copy over the CSS from the dist folder into your own style.css file, or include it using the wp_enqueue_style() function.
  3. Make sure your theme is using at least jQuery 1.11.2 or higher.
  4. Include the JS from the dist folder using the wp_enqueue_script() Make sure you include this script after you include jQuery.

The next few steps depend on how you want to use the plugin. Below are a few examples. You’ll need to put similar code into the ‘text’ tab of the editor.

Examples

This first example is a simple link that triggers a modal window containing hidden content. The code below shows the HTML for the link.

Note the attributes being used for the <a> tag. You’ll need the class value for the js, and you’ll need to give your modal content an id attribute matching the href value.

    

	<a class="inline" href="#inline">show</a>

	<div id="inline">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia qual venenati vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>

For best results, you should hide the content using CSS.

	
	div#inline { 
		display: none; 
	} 

Last step is to call the js function

	
	// the class selector must match the link tag 'class' attribute
	$(".inline").modaal();

Show Content Modaal

Subscribe!


Create a pop-up window with a video hosted on YouTube, or Vimeo.

<!-- YouTube -->
<a class="video" href="https://www.youtube.com/embed/J4QtaszgUto">Show</a>

<!-- Vimeo -->
<a class="video" href="https://player.vimeo.com/video/142216434">Show</a>	

The js is similar to the inline demo but requires the video setting.

	
	$('.video').modaal({
	    type: 'video'
	});

Show Video Modaal


Create an image gallery

For the image gallery I uploaded few images on the media page in the WordPress dashboard. It’s important to do it this way because WordPress will create thumbnail versions of your images (shown below). WordPress will also wrap each image with an link to the main file. This is exactly what needs to be done for the gallery Modaal.

Here’s an example of the html currently being used on this page. The only thing I did was add the class and rel attributes to the <a> tag.

<a class="gallery" href="http://easydevtuts.com/wp-content/uploads/2016/04/pexels-photo-compressor.jpg" rel="gallery">
	<img class="alignnone size-thumbnail wp-image-234" src="http://easydevtuts.com/wp-content/uploads/2016/04/pexels-photo-compressor-150x150.jpg" alt="pexels-photo-compressor" width="150" height="150" />
</a>
<a class="gallery" href="http://easydevtuts.com/wp-content/uploads/2016/04/bear-brown-bear-animal-teddy-bear-46175-compressor.jpeg" rel="gallery">
	<img class="alignnone size-thumbnail wp-image-235" src="http://easydevtuts.com/wp-content/uploads/2016/04/bear-brown-bear-animal-teddy-bear-46175-compressor-150x150.jpeg" alt="bear-brown-bear-animal-teddy-bear-46175-compressor" width="150" height="150" />
</a>
<a class="gallery" href="http://easydevtuts.com/wp-content/uploads/2016/04/bear-animals-zoo-captivity-compressor.jpg" rel="gallery">
	<img class="alignnone size-thumbnail wp-image-236" src="http://easydevtuts.com/wp-content/uploads/2016/04/bear-animals-zoo-captivity-compressor-150x150.jpg" alt="bear-animals-zoo-captivity-compressor" width="150" height="150" />
</a>

The js is shown below:

	
	$('.gallery').modaal({
	    type: 'image'
	});

example

pexels-photo-compressorbear-brown-bear-animal-teddy-bear-46175-compressorbear-animals-zoo-captivity-compressor

  • Obinna Johnson

    Hello please tutor! i don’t want know if i messed up my codes, immediately i started styling the nav bar after including form in the modal dialog i noticed that the modal itself and the dropdown list in the nav bar stopped working including the collapse button for mobile view and i have not been able to fix after long hours of troubleshooting please what could have caused it cos i cant figure it out.