jQuery弹窗代码修改,高手帮下忙

找了两款插件,jQuery jBox 和 jquery tools  
但jQuery jBox是用
<script type="text/javascript">
function lianjie(){
$.jBox("iframe:http://www.baidu.com", {
title: "窗口标题",
width: 800,
height: 550,
buttons: { '关闭': true }});
}
</script>
<a href="javascript:lianjie();">baidu</a>
这样调用很麻烦,多个超链接的话就更麻烦了,能否改成像:
<a href="http://www.baidu.com" id="iframe">baidu</a>
来让jQuery运行?
还有jquery tools 代码比较小,也不用调用jquery库,
但我测试时只能显示本地相对地址的htm文件,不能显示外部地址,本地htm文件也不能执行里面的代码,只能用做显示而已,是否本身就不支持调用外部框架?
JBox Demo:http://www.kudystudio.com/
jquery tools:http://jquerytools.org/demos/overlay/external.html

解决方案 »

  1.   

    可能是iframe 跨域限制的原因吧
    每个都写太麻烦的话，可以集中绑定事件.当然把事件绑定代码存为.js是最方便多个页面调用的
      <a href="http://www.baidu.com" class="jbox" title="百度">baidu</a>
    <a href="http://www.google.com" class="jbox" title="谷歌">google</a>    $(".jbox").click(function() {
            $.jBox("iframe:" + $(this).attr("href") , {
            title: $(this).attr("title"),
                width: 800,
                height: 550,
                buttons: { '关闭': true}
            });
            event.preventDefault();
          }
        );
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
    <link id="skin" rel="stylesheet" href="http://www.kudystudio.com/jbox/jBox/Skins/Default/jbox.css" />
    <script type="text/javascript" src="http://www.kudystudio.com/jbox/jBox/jquery.jBox-2.3.min.js"></script>
    <script type="text/javascript">
    $(".jbox").click(function() {
    $.jBox("iframe:" + $(this).attr("href") , {
    title: $(this).attr("title"),
    width: 800,
    height: 550,
    buttons: { '关闭': true}
    });
    event.preventDefault();
    });
    </script>
    <a href="http://www.baidu.com" class="jbox" title="百度">baidu</a>
    <a href="http://www.google.com" class="jbox" title="谷歌">google</a>
    </body>
    </html>
    代码无法使用,点击超链接直接弹出新页面
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
    <link id="skin" rel="stylesheet" href="http://www.kudystudio.com/jbox/jBox/Skins/Default/jbox.css" />
    <script type="text/javascript" src="http://www.kudystudio.com/jbox/jBox/jquery.jBox-2.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $(".jbox").click(function() {
    $.jBox("iframe:" + $(this).attr("href") , {
    title: $(this).attr("title"),
    width: 800,
    height: 550,
    buttons: { '关闭': true}
    });
    return false;
    });
    });
    </script>
    <a href="http://www.baidu.com" class="jbox" title="百度">baidu</a>
    <a href="http://www.google.com" class="jbox" title="谷歌">google</a>
    </body>
    </html>