jQuery事件处理程序，通过单击按钮激活Fancybox Iframe

Question

我正试图使用fancybox Iframe在Iframe中打开一个网站链接，我需要点击一个按钮来打开它。

那么我该怎么做呢？

这是我从网站上得到的：

参考文献：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="/js/fancybox-1.3.4/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="/js/fancybox-1.3.4/jquery.mousewheel-3.0.4.pack.js"></script>
 <script type="text/javascript">
$("#various3").fancybox({
                'width'             : '75%',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });
 </script>

这是Iframe链接：

<li><a id="various3" href="http://jquery.com/">Iframe (75% width and height)</a></li>

这是我的按钮：

<input id="Button1" type="button" value="button" />

Answer 1

$("#Button1").click (function () {
$("#various3").fancybox({
                'width'             : '75%',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });
} );

编辑

并更改为：

<li><a id="various3" href="http://jquery.com/"><input id="Button1" type="button" value="button" /></a></li>

Answer 2

如果您想用超链接或按钮打开fancybox。。。或同时使用

然后你可以有这个html

<li><a id="various3" href="http://jquery.com/">Iframe (75% width and height)</a></li>
<input id="Button1" type="button" value="button" />

和这个脚本

<script type="text/javascript">
$(document).ready(function() {
$("#various3").fancybox({
 'width'             : '75%',
 'height'            : '75%',
 'autoScale'         : false,
 'transitionIn'      : 'none',
 'transitionOut'     : 'none',
 'type'              : 'iframe'
});     
$("#Button1").click(function(){
 $("#various3").trigger('click');
});
}); // ready
</script>

Answer 3

现在回答已经足够晚了，但希望这能有所帮助。以下是适用于我的代码。

 $("#YOUR-BUTTON-ID").live('click',function() {
   $.fancybox({
    'href'              : 'PAGE-URL',
    'width'             : '60%',
    'height'            : '60%',
    'autoScale'         : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'              : 'iframe'
   });   
});  

希望这就是您想要的

Answer 4

试试这样的东西：

$("#tip4").click(function() {
    $.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'     : 680,
        'height'        : 495,
        'href'          : this.href.replace(new RegExp("watch\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
             'wmode'        : 'transparent',
            'allowfullscreen'   : 'true'
        }
    });
    return false;
});

来源：http://fancybox.net/blog

Answer 5

在FancyBox 2 中这样尝试

    $("#button_id").click(function() {
      $.fancybox(open_url, {
        'autoScale': true,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'iframe'
      });
    });