0

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

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

4

4 回答 4

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%"});
  });     
});
于 2012-12-17T07:57:47.710 回答
0

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

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

$(document).ready(function(){
    $('#yourButtonId').click(function () {
        $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
    }
});
于 2012-12-17T07:58:20.397 回答
0

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

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

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

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

于 2012-12-17T08:26:56.197 回答
0

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

    <a class='iframe' href="http://wikipedia.com">
    <button>Outside Webpage (Iframe)</button></a>
于 2019-09-09T02:58:07.013 回答