Question

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

给出了colorbox的例子

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

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

在上面的colorbox示例中，他们在点击链接时在弹出窗口中加载外部页面，但我想在点击按钮时这样做。

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>

按钮单击弹出窗口中的jquery colorbox加载页面

4 个答案: