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

Question

我想在弹出窗口中加载一个 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%"});
});

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

Answer 4

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

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