Make the Joomla Modal Popup Responsive

Today, its critical that your site is mobile friendly. More and more people are accessing the web via their mobile devices. The Joomla native Joomla modal popup is not responsive by default. Here’s how you can make it responsive.

 The Code to make it happen !

1. Import following library at the start of the page. Please make sure you embed this code in php start and end  tags.

JHTML::_('behavior.modal', 'a.modal');

 This simply ensures that the modal.js script and the modal.css style sheets are loaded, plus the mootools javascript framework which the script requires, and initialises the modal window. Note that from Joomla 3.3x onwards using JQuery might be a better idea. 

 

2. Add following function in javascript

$(document).ready(function() {
	var width = $(window).width();
	var height = $(window).height();

	//ID of container
	$('a#modal_info').attr('rel','{handler: "iframe", size: {x: '+(width-(width*0.10))+', y: '+(height-(height*0.10))+'}}');
});

If we give modal size directly in html then it will not make modal popup responsive. So for that we have used javascript to give size to the modal.

To give size to the popup window, first we dynamically calculated window size and gave that size to the modal window so this can make our modal popup responsive. 

3. Now you need to invoke the modal in your html with the code below.  Give same id to the javascript and container.

<a

	id="modal_info"
	href="#"
	class="modal"
	>
</a>

 To create a popup you simply give the css class 'modal' to the link <a> tag which links to the content you want to display just like you would normally do !