如何实现简单带有指向点击处箭头的说明窗口

请叫我汪海 2013-04-19 07:56:51

效果类似于iPhone中的PopView：

考虑用弹出浮动div的方法，但是不知道有没有什么正统方案？谢谢

...全文

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

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

daswcszxw 2013-04-19

打赏
举报


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body{ font:12px "宋体";}
#aa{cursor:pointer;}
#bb{display:none;color:#000;border:1px solid #000;background-color:#ccc;width:100px;height:100px;}
#bb span{width:30px;height:30px;line-height:30px;text-align:center;background-color:#fff;display:block;float:left;margin:0 10px;cursor:pointer;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#aa").click(function(){
		$("#bb").css("display","block");
		});
	$("#ok").click(function(){
		$("#aa").fadeOut(500);
		$("#bb").fadeOut(500);
		});	
	$("#no").click(function(){
		$("#bb").fadeOut(500);
		});
});
</script>
</head>
<body>
<div id="aa">请点击我</div>
<div id="bb"><span id="ok">确定</span><span id="no">取消</span></div>
</body>
</html>

沪php攻城师 2013-04-19

打赏
举报

引用 4 楼 wxg694175346 的回复:

引用 3 楼 jzh2004 的回复:点击事件时判断鼠标点击的位置，然后将DIV框位置和鼠标位置设置相同，通常用event.clientX和event.clientY获取鼠标坐标，当然这个是屏幕位置，如果有滚动条且滚动需要加上相对位移，这个你可以网上搜索下相关文章解决。好的，谢谢啦，本来以为会有什么现成的js可供使用，现在看来还是只能自己写了，不管怎样谢谢了 ……

老是想现成的，你永远不会有提高。等你学会自己写了，搞懂原理了，然后可以用现成的，至少你知道怎么改了。

请叫我汪海 2013-04-19

打赏
举报

引用 3 楼 jzh2004 的回复:

点击事件时判断鼠标点击的位置，然后将DIV框位置和鼠标位置设置相同，通常用event.clientX和event.clientY获取鼠标坐标，当然这个是屏幕位置，如果有滚动条且滚动需要加上相对位移，这个你可以网上搜索下相关文章解决。

好的，谢谢啦，本来以为会有什么现成的js可供使用，现在看来还是只能自己写了，不管怎样谢谢了

沪php攻城师 2013-04-19

打赏
举报

点击事件时判断鼠标点击的位置，然后将DIV框位置和鼠标位置设置相同，通常用event.clientX和event.clientY获取鼠标坐标，当然这个是屏幕位置，如果有滚动条且滚动需要加上相对位移，这个你可以网上搜索下相关文章解决。

请叫我汪海 2013-04-19

打赏
举报

引用 1 楼 webyellow 的回复:

XML/HTML code?1234567891011121314151617181920212223242526272829303132<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><sty……

满足了基本的弹窗要求，但是无法在点击的位置准确弹出。。。