原生JS封装MessageBox

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_29843547/article/details/87881003

一切尽在代码中

/**
 * 消息弹窗
 * @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();
  }

}