Make the Joomla Modal Popup Responsive

responsive_modal.html

<!-- Make the Joomla Modal Popup Responsive -->

<!-- 1. Import following library at the start of the page. -->

<?php JHTML::_('behavior.modal', 'a.modal'); ?>

<!-- This 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 -->

<script>
$(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))+'}}');
});
</script>

<!-- 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">link</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 ! -->