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

lirko4156 2012-03-22 11:48:29

类此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>

...全文

553 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

「已注销」 2012-03-24

打赏
举报

[Quote=引用 1 楼 changjay 的回复:]
直接用插件吧，推荐http://fancybox.net/
[/Quote]
类似的插件我找过几个了,只能加A标签是加上ID才有效,加ID的话由于程序问题很难改变了

「已注销」 2012-03-24

打赏
举报

<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>
所以是不符合要求...

「已注销」 2012-03-24

打赏
举报

和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>