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'
      });
    });

jQuery事件处理程序，用于点击按钮激活Fancybox Iframe

5 个答案:

修改