IT基地
用户登陆
我要注册
用户名或密码错误
登 陆
注 册
IT基地 >Mr.Li的博客 >我要发文
弹出层/蒙版层样式
作者:Mr.Li   发布时间:2019-06-28 10:13:48   点击数:184

一、基础提示弹窗

微信截图_20190628100628.png

代码

<style>
.msg{
	width: 50%;
	display: none;
	z-index: 999;
	position: fixed;
	left: 25%;
	top: 40%;
	background: rgba(0,0,0,0.8);
	text-align: center;
	font-size: 14px;
	line-height: 18px;
	color: #fff;
	padding: 15px 10px;
	border-radius: 5px;
	margin-left: -10px;
}
</style>
<div class="msg"></div>
<script>
//消息提示框
function showmsg(msg){
	$('.msg').html(msg).show();
	setTimeout(function(){
		$('.msg').hide();
	},1500);
}
</script>


二、加载中弹窗

微信截图_20190628101029.png

代码

<style>
.loadingbg{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 21;
	display: none;
}
.loading{
	width: 100px;
	height: 100px;
	line-height: 120px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -50px;
	margin-top: -50px;
	background: rgba(0,0,0,0.8);
	border-radius: 8px;
	z-index: 22;
	display: none;
}
.loading img{
	width: 60%;
	float: left;
	margin-left: 20%;
	margin-top: 20px;
}
</style>
<div class="loadingbg"></div>
<div class="loading"><img src="/images/loading.gif"></div>

素材

timg.gif

本站部分数据来自软件的自动采集,仅用于学习交流,决不用于商用,如有侵犯您的合法权益,请联系我们删除。
发表技术文档,,记录个人生活,聚集意见领袖,众多IT精英,以我们的技术让开发更便捷。
IT基地版权所有,伪版必究 京ICP备17064610号-1
微信QQ空间QQ好友新浪微博FacebookTwitter