jquery colorbox加载页面在按钮点击弹出窗口中答案

【问题标题】：jquery colorbox load page in popup on button clickjquery colorbox加载页面在按钮点击弹出窗口中
【发布时间】：2012-12-17 07:55:42
【问题描述】：

我想在弹出窗口中加载一个 html 页面。我做了一些谷歌，发现 jquery colorbox。他们给出的示例使用anchor tag，但我想在按钮单击时加载弹出窗口。

颜色框示例

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

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

在上面的颜色框示例中，他们在单击链接时在弹出窗口中加载外部页面，但我想在单击按钮时执行此操作。

【问题讨论】：

标签： jquery popup

【解决方案1】：

尝试：

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

【讨论】：

jQuery.fn.colorbox({iframe:true, width:"80%", height:"80%"}) 为我工作

【解决方案2】：

通过将颜色框放在$(document).ready(function(){ 中，在页面加载时会创建弹出窗口。

只需将点击事件绑定到按钮：

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

【讨论】：

【解决方案3】：

在按钮点击时绑定此代码：

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

$(".iframe") - 必须有href 标签

open:true - 单击按钮后将打开颜色框

【讨论】：

【解决方案4】：

使用锚标签并用按钮标签包围文本：

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

【讨论】：