jquery弹出层 +CSS箭头制作_前端自写带箭头的消息弹框-优快云博客

本文链接：https://blog.youkuaiyun.com/xuzengqiang2/article/details/43271809

本文介绍了如何使用CSS3和jQuery创建一个带箭头的弹出层。对于不支持CSS3的浏览器，通过两个`<b>`标签模拟箭头；对于支持CSS3的浏览器，则利用边框旋转实现。文中还提到了jQuery Tween缓动算法在弹出层动画中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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>

具体效果为：

这里用到了jQuery tween算法，可以看下我的jQuery Tween缓动算法，导入的就是里面的js文件。

这里用的第二个样式做了个弹出层（点击弹出时弹出弹出层，点击除弹出层外的其它地方关闭弹出层）：

<!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>  
<script type="text/javascript" src="jQuery.tween.js"></script>
<style type="text/css">  
    *{margin:0;padding:0;font-family:微软雅黑}  
    .content{margin-left:400px;margin-top:400px;}  
    .colorbox{width:200px;height:105px;overflow:hidden;opacity:0;filter:alpha(opacity=0);} 
	.colorbox-body{height:90px;margin-top:10px;border:1px solid #AFAFAF;background:#FFFFFF;
	border-radius:3px;box-shadow:1px 3px 3px #DFDFDF;width:198px;}	 
    .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);}  
	.info{font-size:10pt;color:#3399CC;}
</style>  
</head>  
  
<body style="background:#EFEFEF;">  
    <div class="content">  
        <button class="test">弹出</button>  
        <div class="colorbox">  
			<div class="colorbox-body">
				<div class="arrow-outer">  
					<div class="arrow"></div>  
				</div>
				<button class="close">测试</button> 
			</div>
        </div>  
    </div>  
</body> 
<script type="text/javascript">
	$(".test").click(function(){
		$(".colorbox").css({"height":"0px","margin-top":"-200px"});
		$(".colorbox").slowMove(
			{"speed":10,"tween":"Bounce","ease":"easeOut"},
			{"height":"105px","opacity":1,"margin-top":"0px"}
		);
	});
	$(document).click(function(event){
		var $colorbox = $(".colorbox"),
			$button = $(".test");
		//当点击弹出按钮和弹出框本身的时候不触发关闭事件	
		if(!$colorbox.triggerTarget(event) && !$button.triggerTarget(event)) {
			if(!$(".colorbox").isMove()) {
				$colorbox.stop(false,true).animate({"opacity":"0"},500);
			}
		}
	});
	
	jQuery.fn.extend({
		/**
		 * 描述:事件触发对象
		 * true:为对象本身,否则为其它对象
		***/
		triggerTarget:function(event){
			return $(this).is(event.target) || $(this).has(event.target).length > 0; 
		}
	});
</script> 
</html>