How to adjust colorbox popup content height/width with screen height/width

Colorbox can be used to display content pop-ups. By default, the popup's height and width will be exactly the same as that of the original content. But there may be times, when you want to load the content as per the screen height. This can be done easily using jQuery.

The steps you may follow to achieve this are:

1. Assign the content which is to be displayed in the colorbox, to a variable.
2. Find the width and height of the above content.
3. Find the current screen's width and height.
4. Compare height of the content with screen height.
   If the content's height is greater than the screen height, the content's height is set as the screen height.
   Same, in the case of width.
5. Load the content with proper height and width in colorbox.

The code implementation of the above steps is given below:

$(".popout-link").click(function() {  //.popout-link, the class in which you need the pop-up functionality.
  var popup_content = $('#content').html(); // Replace #content with the content's id
  var y = $('#content').height(); //Content's height
  var x = $('#content').width();  //Content's width
  var wy = $(window).height();   // Assigning the screen's height to wy
  var wx = $(window).width();    // Assigning the screen's width to wy
  if (y > wy) { //Compares the height
    y = wy; 
  }
  else {
    y = y; 
  }
  if (x > wx) { //Compares the width
    x = wx; 
  }
  else {
    x = x; 
  }
  $.colorbox({html:""+popup_content+"", width:x, height:y, onComplete: function() { //loads the content in colorbox with specific width and height
    $('#cboxLoadedContent').jScrollPane(); // call this function to show scroll bar (You need to enable Jscrollpane Module to use this though)
  } 
}