jquery css3网页常用带图标提示框样式/可删除的提示框样式



446 1783 595



特效描述:jquery css3 网页常用 带图标提示框样式 可删除提示框样式,网页常用带图标提示框样式/可删除的提示框样式

代码结构

1. 引入JS

<script type="text/javascript" src='js/jquery-1.4.2.min.js'></script>

2. HTML代码

<div class="container">
	<div class="flag note">
		<div class="flag__image note__icon">
			<i class="fa fa-heart"></i>
		</div>
		<div class="flag__body note__text">Default color</div>
		<a href="#" class="note__close"><i class="fa fa-times"></i></a>
	</div>
	<div class="flag note note--secondary">
		<div class="flag__image note__icon">
			<i class="fa fa-comment"></i>
		</div>
		<div class="flag__body note__text">Secondary color</div>
		<a href="#" class="note__close"><i class="fa fa-times"></i></a>
	</div>
	<div class="flag note note--success">
		<div class="flag__image note__icon">
			<i class="fa fa-check"></i>
		</div>
		<div class="flag__body note__text">Your thing was successful!</div>
		<a href="#" class="note__close"><i class="fa fa-times"></i></a>
	</div>
	<div class="flag note note--warning">
		<div class="flag__image note__icon">
			<i class="fa fa-exclamation"></i>
		</div>
		<div class="flag__body note__text">Your thing was not so successful!</div>
		<a href="#" class="note__close"><i class="fa fa-times"></i></a>
	</div>
	<div class="flag note note--error">
		<div class="flag__image note__icon">
			<i class="fa fa-times"></i>
		</div>
		<div class="flag__body note__text">Your thing failed completely!</div>
		<a href="#" class="note__close"><i class="fa fa-times"></i></a>
	</div>
	<div class="flag note note--info">
		<div class="flag__image note__icon">
			<i class="fa fa-info"></i>
		</div>
		<div class="flag__body note__text">
			<p>I barely knew Philip, but as a clergyman I have no problem telling his most intimate friends all about him. Calculon is gonna kill us and it's all everybody else's fault! Is that a cooking show? When will that be? Shut up and get to the point! Bender, being God isn't easy. If you do too much, people get dependent on you, and if you do nothing, they lose hope. You have to use a light touch. Like a safecracker, or a pickpocket.</p>
		</div>
		<a href="#" class="note__close"><i class="fa fa-times"></i></a>
	</div>
</div>
<script type="text/javascript">
$(".note__close").click(function(){
	$(this).parent().fadeOut(500, function(){
		$(this).remove();
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 图片头像上传 图片广告 文字提示框 文件上传 对联广告 提示框/弹出层 文本框 layer 下拉框 叠加浮动层 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到