求助:jQuery或JS某DIV区所有超链接弹窗打开800*600窗口(类此jQuery图片特效)

类此jQuery图片特效代码修改,网上有jQuery图片特效的代码:
鼠标点击网页的图片在当前屏中央会显示原图和图片区外背景变灰,点击关闭按钮或图片以外区域会把这个特效退出...
现在我想要用这个特效改成鼠标点击某一个指定的DIV区里面的超链接,弹出一个800*600的窗口显示这个超链接URL里面的内容,同时除了800*600的窗口外背景变灰,但这个800*600窗口只能点击这个弹出窗口上的关闭按钮才关闭,点击其他地方不关闭..
还有能否把这个DIV区的超链接用800*600窗口打开前改变一下原URL的地址..
如:<div id="abc"><a href="http://www.baidu.com">内容</a></div>
点击超链接后自动添加自己设置的URL+超链接弹出窗口访问
效果:
<div id="abc"><a href="http://www.url.com/url.html?http://www.baidu.com">内容</a></div>

解决方案 »

  1.   

    直接用插件吧，推荐http://fancybox.net/
      

  2.   

    和fancybox类似的插件我下载过来使用,但一般都不支持指定某个DIV区内的A标签(超链接)
    以上代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <script type="text/javascript">
    $(document).ready(function() {
    $("a#example3").fancybox({
    'transitionIn' : 'none',
    'transitionOut' : 'none'
    }); $("#various3").fancybox({
    'width' : '75%',
    'height' : '75%',
    'autoScale' : false,
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'type' : 'iframe'
    });
    });
    </script>
    </head>
    <body>
    <div id="content">
    <li><a id="various3" href="http://google.ca">Iframe</a></li>
    <li><a id="various3" href="http://baidu.com">Iframe</a></li>
    </body>
    </html>
      

  3.   

    <li><a id="various3" href="http://google.ca">Iframe</a></li>
    以上只能只有一个A标签可以用弹窗打开,但第二个A标签就直接打开网页了,
    还有一个问题就是不能指定某一个DIV区内的A标签,只对><a id="various3" href="http://google.ca">Iframe</a>.....A标签加ID名有效,如果把ID名删除,用DIV ID加的话是无法显示的,,如:<div id="various3">
    <li><a href="http://google.ca">Iframe</a></li>
    <li><a href="http://baidu.com">Iframe</a></li>
    </div>
    所以是不符合要求...
      

  4.   

    类似的插件我找过几个了,只能加A标签是加上ID才有效,加ID的话由于程序问题很难改变了