求助: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>
...全文
554 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>
tcx814616 2012-03-23
  • 打赏
  • 举报
回复
同意楼上的 这样的插件太多了 大小也还好
  • 打赏
  • 举报
回复
直接用插件吧,推荐http://fancybox.net/

87,989

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧