首页 > 代码库 > jquery弹出层 +CSS箭头制作

jquery弹出层 +CSS箭头制作

2024-11-21 17:27:39   203人阅读

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

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=http://www.mamicode.com/"jquery-1.9.1.js"></script>>样式显示为：
技术分享

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=http://www.mamicode.com/"jquery-1.9.1.js"></script>  >
具体效果为：
技术分享



jquery弹出层 +CSS箭头制作


联系
我们