Html
    Css
    Js

    
                        
.cover-layer {
	width:100%;
	height:100%;
	background:#2e3a4b;
	opacity:0.2;
	position:fixed;
	left:0px;
	right:0px;
	top:0px;
	margin:auto;
	z-index:9998;
}
.dialog {
	width:280px;
	height:160px;
	background:white;
	border-radius:3px;
	position:fixed;
	left:0px;
	top:0px;
	bottom:0px;
	right:0px;
	margin:auto;
	z-index:9999;
}
.close-icon {
	position:absolute;
	top:15px;
	right:15px;
	width:20px;
	height:20px;
	cursor:pointer;
}
.button-content {
	position:absolute;
	bottom:12px;
	width:auto;
	height:30px;
	margin:auto;
	left:20%;
}
.alert-btn {
	border:none;
	outline:none;
	background:#0FAEE4;
	width:80px;
	height:30px;
	line-height:30px;
	text-align:center;
	font-family:"微软雅黑";
	color:white;
	cursor:pointer;
	border-radius:2px;
	display:inline-block;
	margin-left:5px;
	margin-right:5px;
}
.alert-content {
	position:absolute;
	top:62px;
	width:100%;
	text-align:center;
	font-family:"微软雅黑";
	font-size:14px;
}

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

alert弹框效果

直接调用,可扩展,自定义样式

0