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.
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.
$(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.
<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 !
When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.