一切尽在代码中
/**
* 消息弹窗
* @param {title} string 消息标题 ex:...
* @param {message} string 消息正文内容 ex: bla bla ...
* @param {[dangerouslyUseHTMLString]} boolean 是否将 message 属性作为HTML片段处理 默认值: false
* @param {[callback]} fuc 消息弹窗 关闭后的回调
* @param {[showClose]]} boolean 消息弹窗 是否显示右上角关闭按钮
* @param {[showLookDetailButton]]} boolean 是否显示查看详情按钮
* @param {[showLookMoreButton]} boolean 是否显示查看更多按钮
* @param {[lookDetailButtonText]]} string 查看详情按钮的文案
* @param {[lookMoreButtonText]]} string 查看更多按钮的文案
* @param {[lookDetailButtonCallBack]]} string 查看详情按钮点击的回调
* @param {[lookMoreButtonCallBack]]} string 查看更多按钮点击的回调
*/
// usage
/*
var options = new Options();
options.prototype = {
}
MessageBox(options);
*/
// 默认值
var Options = function(){};
Options.prototype = {
title: '',
message: '',
dangerouslyUseHTMLString: 0,
callback: function(){},
showClose: 1,
showLookDetailButton: 1,
showLookMoreButton: 1,
lookDetailButtonText: 'xxx',
lookMoreButtonText: 'xxx',
lookDetailButtonCallBack: function(){},
lookMoreButtonCallBack: function(){}
}
var MessageBox = function (options) {
// 基础dom
var dom = document.createElement('div');
var messageBoxContainer = document.body;
dom.id = 'MessageBox';
dom.style.display = 'none'; //先不展示
var domContent = '<p class="title"></p><p class="message"></p>'; // todo 这里放切图内容
dom.innerHTML = domContent;
// 是否将 title message 属性作为HTML片段处理 默认值: false
var titleDom = dom.getElementsByClassName('title')[0];
var messageDom = dom.getElementsByClassName('message')[0];
if (options.dangerouslyUseHTMLString) {
titleDom.innerHTML = options.title;
messageDom.innerHTML = options.message;
} else {
titleDom.innerText = options.title;
messageDom.innerText = options.message;
}
// 绑定关闭弹窗的回调
var closebuttonDom = dom.getElementsByClassName('close-button')[0]; // todo 关闭按钮的class
closebuttonDom.onclick = function(){
// todo 关闭触发的 things ...
options.callback();
}
// 是否显示右上角关闭按钮
if (!options.showClose) {
closebuttonDom.style.display = 'none';
}
var lookDetailButtonDom = dom.getElementsByClassName('look-detail-button')[0]; // todo 按钮的class
var lookMoreButtonDom = dom.getElementsByClassName('look-more-button')[0]; // todo 按钮的class
// 是否显示查看详情按钮
if(!options.showLookDetailButton){
lookDetailButtonDom.style.display = 'none';
}
// 是否显示查看更多按钮
if(!options.showLookMoreButton){
lookMoreButtonDom.style.display = 'none';
}
// 设置按钮文案
lookDetailButtonDom.innerText = options.lookDetailButtonText;
lookMoreButtonDom.innerText = options.lookMoreButtonText;
// 设置按钮回调函数
lookDetailButtonDom.onclick = function(){
// todo things ...
options.lookDetailButtonCallBack();
}
lookMoreButtonDom.onclick = function(){
// todo things ...
options.lookMoreButtonCallBack();
}
}