Question

I want to load a html page in popup. I did some google and found jquery colorbox. The examples that they have given uses anchor tag but I want to load popup on button click.

Example given for colorbox

<a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a>

$(document).ready(function(){
     $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
});

in above example of colorbox they are loading a external page in popup on click of link but I want to do that on click of button.

Answer 1

try:

<input type="button" id="yourButtonId" value="Load Page" />

$(document).ready(function(){
  $("#yourButtonId").on("click", function() {
     $.fn.colorbox({iframe:true, width:"80%", height:"80%"});
     //or
     $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
  });     
});