CODEWITHSUNDEEP
jquerypopup
Sandy
Sandy

Reputation: 14125

jquery colorbox load page in popup on button click

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.

Upvotes: 0

Views: 13019

Answers (4)

akeane
akeane

Reputation: 1

Use the anchor tag and surround the text with button tag:

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

Upvotes: 0

webdeveloper
webdeveloper

Reputation: 17288

Bind this code on button click:

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

$(".iframe") - must have href tag

open:true - will open colorbox after button click

Upvotes: 0

Justin McDonald
Justin McDonald

Reputation: 2166

By placing the colorbox in $(document).ready(function(){, the popup is being created upon page load.

Simply bind a click event to the button:

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

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

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%"});
  });     
});

Upvotes: 1

Related Questions