怎么实现简单带有指向点击处箭头的说明窗口-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20468 次

如何实现简单带有指向点击处箭头的说明窗口
效果类似于iPhone中的PopView：

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

------解决方案--------------------



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