jquery弹出层 +CSS箭头制作

浏览数：20 / 时间：2015年06月09日

这里做一个带箭头的弹出层。

1、如果浏览器不支持CSS3，我们可以用border模拟。但是这个时候箭头不能带边框，即纯色，不太好看，这个时候我们可以利用两个b标签实现：

首先需要制作一个向上的箭头，箭头的颜色为弹出层边框颜色，其它方向可以模仿做出来。

.arrow-outer{ 
	width:0px;height:0px;display:block;
	border-bottom:10px solid #AFAFAF;
	border-left:10px solid transparent;
	border-right:10px solid transparent; /*制作上三角*/
}

然后制作一个比它小点的箭头，箭头的颜色就是弹出层主体的颜色，覆盖在大的箭头上面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出层测试</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style type="text/css">
	*{margin:0;padding:0;font-family:微软雅黑}
	.content{margin-left:400px;margin-top:400px;}
	.colorbox{width:200px;height:100px;border:1px solid #AFAFAF;border-radius:3px;box-shadow:1px 5px 5px #EFEFEF;
		margin-top:10px;
	}
	.arrow-range{border:0px solid #AFAFAF;width:20px;height:10px;left:10px;position:relative;top:-10px;}
	.arrow-outer{ 
		width:0px;height:0px;display:block;
		border-bottom:10px solid #AFAFAF;
		border-left:10px solid transparent;
		border-right:10px solid transparent; /*制作上三角*/
	}
	.arrow-inner{
		width:0px;height:0px;display:block;
		border-bottom:9px solid #FFFFFF;
		border-left:9px solid transparent;
		border-right:9px solid transparent;
		position:relative;left:1.4px;top:-8px;
	}
</style>
</head>

<body>
	<div class="content">
		<button>弹出</button>
		<div class="colorbox">
			<div class="arrow-range">
				<b class="arrow-outer"></b>
				<b class="arrow-inner"></b>
			</div>
		</div>
	</div>
</body>

样式显示为：

技术分享

2、如果浏览器支持CSS3，就更好办了，箭头可以理解为一个矩形的边角，这个时候可以定义一个div层，将它旋转到指定位置，这里我们旋转45度。

然后再在这个div层加个父div层，如果超过这个div层则隐藏。具体代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>弹出层测试</title>  
<script type="text/javascript" src="jquery-1.9.1.js"></script>  
<style type="text/css">  
    *{margin:0;padding:0;font-family:微软雅黑}  
    .content{margin-left:400px;margin-top:400px;}  
    .colorbox{width:200px;height:100px;border:1px solid #AFAFAF;border-radius:3px;box-shadow:1px 3px 3px #DFDFDF;  
        margin-top:10px;}  
    .arrow-outer{width:12px;height:7px;position:relative;top:-7px;left:10px;overflow:hidden}  
    .arrow{border:1px solid #AFAFAF;width:10px;height:10px;position:relative;top:2px;  
    -webkit-transform:rotate(45deg);-o-transform:rotate(45deg);background:#FFFFFF;  
    -moz-transform:rotate(45deg);}  
</style>  
</head>  
  
<body>  
    <div class="content">  
        <button>弹出</button>  
        <div class="colorbox">  
            <div class="arrow-outer">  
                <div class="arrow"></div>  
            </div>  
        </div>  
    </div>  
</body>  
</html>

具体效果为：

技术分享