<!DOCTYPE html>
<html>
<head>
<title>wheel modal</title>
<style type="text/css">
body{
margin: 0;
font-family: "PingFang SC" ,"Microsoft YaHei" , Helvetica, Arial ,Verdana , sans-serif;
font-family: '';
font-size: 16px;
}
.wheel-modal{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.2);
}
.wheel-modal-wrap{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 250px;
border: 1px solid #666;
background-color: #eee;
}
.wheel-modal-title{
position: absolute;
width: 100%;
height: 40px;
text-align: left;
text-indent: 1em;
letter-spacing: 2px;
line-height: 40px;
color: #fff;
background-color: #009966;
}
.wheel-modal-close{
position: absolute;
top: 0;
right: 20px;
}
.wheel-modal-footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
height: 40px;
}
.wheel-modal-content{
position: absolute;
top: 40px;
left: 0;
padding:30px;
box-sizing: border-box;
}
.wheel-modal-true,.wheel-modal-cancel{
cursor: pointer;
width: 50%;
float: left;
text-align: center;
line-height: 40px;
background-color:#99CC99 ;
box-sizing: border-box;
}
.wheel-modal-true{
border-right: 1px solid #336699;
}
.wheel-modal-close{
cursor: pointer;
}
</style>
</head>
<body>
<button>show</button>
<button>show2</button>
<p>fex 布局</p>
<p>show hide toggle api</p>
<p>回调</p>
<p>promise</p>
<p>高级 动画</p>
<p>高级 模板，远程模板</p>
<script type="text/javascript">
var btn = document.getElementsByTagName('button')[0];
var btn2 = document.getElementsByTagName('button')[1];
btn.onclick = function(){
var show = new wheelModal();
show.Show('haha');
}
btn2.onclick = function(){
var show = new wheelModal();
show.Show('hahaaaaaa');
}
//创建一个wheelMoadl的函数，取轮子
function wheelModal(element, options){
this.options = options
this.$element = querySelectorAll(element)
}
wheelModal.VERSION = '0.0.1'
wheelModal.DEFAULTS = {
backdrop: true,
keyboard: true,
show: true
}
//添加原型方法
wheelModal.prototype={
// ModalShow方法，传入一个需要弹出提示的字符串
Show : function(str){
//html模板
var completeStr ='<div class="wheel-modal">\
<div class="wheel-modal-wrap">\
<div class="wheel-modal-title">提醒<span class="wheel-modal-close">X</span></div>\
<div class="wheel-modal-content">'+str+'</div>\
<div class="wheel-modal-footer">\
<div class="wheel-modal-true">确定</div>\
<div class="wheel-modal-cancel">取消</div>\
</div>\
</div>\
</div>';
// 在页面中创建生成模板
var div = document.createElement('div');
// 生成一个随机的id
var id = 'wheel-modal-'+parseInt(Math.random()*101090);
div.id = id;
div.innerHTML = completeStr;
document.body.appendChild(div);
//获取模板中按钮
var control = document.getElementById(id);
var wheelTrue = control.getElementsByClassName('wheel-modal-true')[0];
var wheelFalse = control.getElementsByClassName('wheel-modal-cancel')[0];
var close = control.getElementsByClassName('wheel-modal-close')[0];
//给控制按钮添加监听事件
wheelTrue.addEventListener('click',function(){
console.log('yes');
document.body.removeChild(div);
return true;
});
wheelFalse.addEventListener('click',function(){
console.log('cancel');
document.body.removeChild(div);
return false;
});
close.addEventListener('click',function(){
console.log('cancel');
document.body.removeChild(div);
return false;
});
},
Hide: function () {
},
Toggle: function () {
},
escape: function () {
},
resize: function () {
},
backdrop: function () {
},
removeBackdrop: function () {
},
enforceFocus: function () {
}
}
</script>
</body>
</html>
console