由于经常会用到一些自定义的弹窗，为避免重复造轮子，所以就写了一个组件的方式。
这个封装功能还不是很全，只能为用户自定义部分内容，后期在继续优化。
这个控件包含一个css文件和一个js文件，注意，该js文件依赖jQuery，所以在使用之前，先把jquer包含进来。
不多少，上代码：
github: https://github.com/xiongxianhe/kingAlert
2017-09-19 第一次更新
css第5行：position: absolute;
改为: position: fixed;
js代码：
/**
* version: v1.0
* author: echo
* email: 360765409@qq.com
* time: 2017-09-06
* userage:
* <script>
function kingAlert(msg) {
KingAlert({
coverColor: 'rgba(0,0,0,0.36)',
title: msg,
okFun: function () {
},
cancelFun: null
});
}
</script>
* @param paramObj
* {
* coverColor: rgba(0,0,0,0.36),
* title: '删除该商品吗？',
* okFun: function(){},
* cancelFun: function(){}
* }
* @constructor
*/
function KingAlert(paramObj) {
this.coverColor = paramObj.coverColor == null ? 'rgba(0,0,0,0.36)':paramObj.coverColor;
this.title = paramObj.title == null ? '删除该商品吗？' : paramObj.title;
this.alertHtml = '<div class="king-alert-contain"><div class="king-alert">\
<div class="alert-title">\
<span>删除该商品吗2？</span>\
<span>X</span>\
</div>\
<div class="alert-body">\
<span class="btn-ok">确定</span>\
<span class="btn-cancel">取消</span>\
</div>\
</div></div>';
$('body').append(this.alertHtml);
$('.king-alert-contain').css({display: 'block',backgroundColor: this.coverColor});
$('.alert-title span:first-child').text(this.title);
$('.king-alert .alert-body .btn-ok').click(function () {
if(paramObj.okFun == null) {
$('.king-alert-contain').remove();
} else
paramObj.okFun();
});
$('.king-alert .alert-body .btn-cancel').click(function () {
if(paramObj.cancelFun == null) {
$('.king-alert-contain').remove();
} else
paramObj.cancelFun();
});
$('.king-alert .alert-title span:last-child').click(function () {
if(paramObj.cancelFun == null) {
$('.king-alert-contain').remove();
} else
paramObj.cancelFun();
});
}
css代码：
.king-alert-contain {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.36);
position: fixed;
top: 0;
left: 0;
display: none;
}
.king-alert {
width: 35%;
height: 170px;
margin: 100px auto;
border: solid 8px rgb(137,137,137);
background-color: white;
}
.alert-title {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #eaeaea;
color: #555555;
overflow: hidden;
font-size: 16px;
}
.alert-title span:first-child {
float: left;
margin-left: 15px;
}
.alert-title span:last-child {
float: right;
margin-right: 15px;
cursor: pointer;
}
.alert-body {
height: 120px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.btn-ok, .btn-cancel {
display: inline-block;
width: 100px;
height: 33px;
line-height: 30px;
background-color: #64a131;
margin: 0 13px;
color: white;
text-align: center;
border-radius: 5px;
cursor: pointer;
}
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义弹窗</title>
<link href="css/kingAlert.css" rel="stylesheet">
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/kingAlert.js"></script>
</head>
<body>
<button onclick="kingAlert('Hello KingAlert');">CLICK</button>
<script>
function kingAlert(msg) {
KingAlert({
coverColor: 'rgba(0,0,0,0.36)',
title: msg,
okFun: function () {
},
cancelFun: null
});
}
</script>
</body>
</html>
Very useful