<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>messageConfirmDemo</title>
</head>
<body>
<input type="button" name="" value='点击打开message弹框' id='btn'>
<script type="text/javascript">
document.getElementById('btn').addEventListener('click',function(e){
lCofirm(
{
mask:true,//Boolean,是否显示遮罩层,非必填,默认显示遮罩层
title:"提示信息",//String,对话框标题,非必填,默认标题"提示"
content:"是否删除",//String,对话框提示内容,非必填,默认内容"这是一条提示消息"
btn:['取消','确认'],//Array,操作按钮;必填项,\length最小1,最大2
width:400,//String/Number,弹框宽度,非必填,默认值300px;
defaultClick:'left',//String,当按下键盘空格或center键时,触发操作按钮的点击事件/按钮高亮,非必填,可取值'left','right',默认值right
key:true,//Boolean,是否启用键盘的空格键和enter键触发操作按钮事件,非必填,默认true,若为false,defaultClick参数事件不在生效
},
function(index){
if(index == '1'){
console.log('点击了第一个按钮')
}else{
console.log("点击了第二个按钮")
}}
)
},true)
function lCofirm(config,callback){
/*
参数说明:必填参数{btn}
1.config:Object,具体字段如下:
mask:true,//Boolean,是否显示遮罩层,非必填,默认显示遮罩层
title:"提示信息",//String,对话框标题,非必填,默认标题"提示"
content:"是否删除",//String,对话框提示内容,非必填,默认内容"这是一条提示消息"
btn:['确认',"取消"]//Array,操作按钮;必填项,length最小1,最大2
width:400//String/Number,弹框宽度,非必填,默认值300px
defaultClick:'left',//String,当按下键盘空格或center键时,触发操作按钮的点击事件/按钮高亮,非必填,可取值'left','right',默认值right
key:true,//Boolean,是否启用键盘的空格键和enter键触发操作按钮事件,非必填,默认true,若为false,defaultClick参数事件不在生效
2.callback:Function,点击对话框中的按钮时关闭弹框后的回调,默认参数index,可取值"0"和"1"
index = "0" //左边的操作按钮
index = '1' //右边的操作按钮
示例:
lCofirm(
{
mask:true,//显示遮罩层
title:"提示信息",//对话框标题
content:"是否删除",//对话框提示内容
btn:['确认'],//操作按钮
width:400//弹框宽度
},
function(index){
//固定结构,强调:若只有一个按钮,回调方法处理程序写在index=='0'条件中
if(index == '0'){
//点击第一个按钮后要做的事情
console.log('点击了第一个按钮')
}else{
//点击第二个按钮后要做的事情
console.log("点击了第二个按钮")
}}
)
*/
/* html结构
<div class="l-messageOrDialog-backgroung" style="background-color:rgba(0,0,0,.4);position:fixed;top:0;bottom:0;left:0;right:0;z-index:1000;tabindex="0";">
<div style="background-color:#fff;padding:5px;border:1px solid #dcdfe6;border-radius:3px;position:absolute;top:25%;left:50%;margin-left:-200px;width:400px;">
<div style="font-weight:600;">提示信息</div>
<div style="padding:5px 0;">是否删除</div>
<div style="text-align:right;padding:5px 0;">
<input style="padding:5px;border:1px solid #dcdfe6;cursor: pointer;border-radius:4px;outline:none;margin-right:8px;" class="l-message-operateBtn l-message-0" type="button" value="取消">
<input style="padding:5px;border:1px solid #dcdfe6;cursor: pointer;border-radius:4px;outline:none;background-color:#409eff;color:#fff" class="l-message-operateBtn l-message-1" type="button" value="确认">
</div>
</div>
</div>
*/
//遮罩层
var lMessageOrDialogDiv=document.createElement('div');
lMessageOrDialogDiv.className = 'l-messageOrDialog-backgroung';
document.body.appendChild(lMessageOrDialogDiv);
lMessageOrDialogDiv.setAttribute('style','background-color:rgba(0,0,0,.4);position:fixed;top:0;bottom:0;left:0;right:0;z-index:1000;tabindex="0";')
if(config.mask == false){
lMessageOrDialogDiv.style='background-color:rgba(0,0,0,0);'
};
//内容区
var lMessageOrDialogBox = document.createElement('div');
lMessageOrDialogDiv.appendChild(lMessageOrDialogBox)
var lMessageOrDialogBoxWidth=config.width||'300'
var lMessageOrDialogBoxMarginLeft = (config.width/2)||'150'
lMessageOrDialogBox.setAttribute('style','background-color:#fff;padding:5px;border:1px solid #dcdfe6;border-radius:3px;position:absolute;top:25%;left:50%;margin-left:-'+lMessageOrDialogBoxMarginLeft+'px;width:'+lMessageOrDialogBoxWidth+'px;')
//标题
var lMessageOrDialogTitle = document.createElement('div');
lMessageOrDialogTitle.innerHTML = config.title||"提示";
lMessageOrDialogTitle.setAttribute('style','font-weight:600;')
lMessageOrDialogBox.appendChild(lMessageOrDialogTitle);
//内容
var lMessageOrDialogContent = document.createElement('div');
lMessageOrDialogContent.innerHTML = config.content||"这是一条提示消息"
lMessageOrDialogContent.setAttribute('style','padding:5px 0;')
lMessageOrDialogBox.appendChild(lMessageOrDialogContent);
//操作按钮
var lMessageOrDialogOperation = document.createElement('div');
lMessageOrDialogOperation.setAttribute('style','text-align:right;padding:5px 0;')
lMessageOrDialogBox.appendChild(lMessageOrDialogOperation);
//设置按钮样式
config.btn.forEach(function(item,index){
var btnDom = document.createElement('input');
var btncss = 'padding:5px;border:1px solid #dcdfe6;cursor:pointer;border-radius:4px;outline:none;';
var btnBgColor = 'background-color:#409eff;color:#fff;';
if(config.btn.length == '2'){
if(index == '0'){
if(config.defaultClick == 'left'){
btnDom.setAttribute('style',btncss+btnBgColor+'margin-right:8px;')
}else{
btnDom.setAttribute('style',btncss+'margin-right:8px;')
}
}else{
if(config.defaultClick == 'left'){
btnDom.setAttribute('style',btncss)
}else{
btnDom.setAttribute('style',btncss+btnBgColor)
}
}
}else if(config.btn .length == '1'){
btnDom.setAttribute('style',btncss+btnBgColor)
}
btnDom.setAttribute('class','l-message-operateBtn'+' '+'l-message-'+index)
btnDom.setAttribute('type','button')
btnDom.value = item ;
lMessageOrDialogOperation.appendChild(btnDom)
if(config.btn.length == '2'){
if(config.defaultClick == 'left'){
if(index == 0)btnDom.focus()
}else if(config.defaultClick == 'right'){
if(index == 1)btnDom.focus()
}else{
if(index == 1)btnDom.focus()
}
}else{
btnDom.focus()
}
})
//是否使用键盘空格和enter键触发操作按钮的点击事件
if(config.key == false){
var nullInput = document.createElement('input');
nullInput.setAttribute('style','background-color:#fff;border:none;width:0')
nullInput.setAttribute('type','button')
lMessageOrDialogOperation.appendChild(nullInput);
nullInput.focus()
}
//去掉弹框操作按钮获取焦点时的边框
var activeElementStyle = document.activeElement.getAttribute('style')
document.activeElement.setAttribute('style',activeElementStyle+';outline:none')
//监听操作按钮
var operateBtnDom = document.getElementsByClassName('l-message-operateBtn')
for(var i = 0;i<operateBtnDom.length;i++){
operateBtnDom[i].idx=i+1;//闭包
operateBtnDom[i].addEventListener('click',function(e){
//阻止默认事件
e.preventDefault();
e.returnValue = false;//兼容ie
//去掉弹框
var dialog = document.querySelector('.l-messageOrDialog-backgroung')
dialog.parentNode.removeChild(dialog);
//执行关闭弹框后的回调
callback(this.idx);
},true)
}
}
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
