Html
    Css
    Js

    
                        
 .mask {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100vh;
	background-color:rgb(0,0,0);
	opacity:.8;
}
.hide {
	display:none;
}
.alert {
	width:400px;
	font-family:Arial,Helvetica,sans-serif;
	font-size:14px;
	border:1px solid rgba(0,0,0,.1);
	box-shadow:1px 1px 5px rgba(0,0,0,.2);
	border-radius:3px;
	background-color:#fff;
	position:fixed;
	top:100px;
	left:100px;
}
.alert .title {
	height:40px;
	line-height:40px;
	padding:0 10px;
}
.alert .title h2 {
	font-weight:normal;
	margin:0;
	font-size:14px;
}
.alert .content {
	padding:10px;
	background-color:#eee;
	min-height:100px;
}
.alert .button {
	padding:0 10px;
	height:50px;
	line-height:50px;
	text-align:right;
}
.alert .button button {
	background-color:#35a9ff;
	color:#fff;
	border-radius:3px;
	border:0;
	outline:0;
	height:30px;
	line-height:30px;
	font-size:14px;
	cursor:pointer;
	padding:0 15px;
	margin-left:10px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

jquery遮罩层模板代码

更新时间:2021-07-27 00:09:58

很粗糙的遮罩层,但功能却全都实现了,如果需要,内容只需要进行少量更改就可以搬到项目里使用,希望对你有帮助!

0