igi_orion_cignacmb
Version:
Censors words out of text
138 lines (129 loc) • 8.19 kB
JavaScript
var modal = {
// modalColor: '#3aaaf8',
modalColor: '#2d2d2d',
modalTitle: '温馨提醒',
modalContent: '',
buttonArray: [],
textAlign:'center',
isMobile: function () {
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
return true;
}
else {
return false;
}
},
init: function () {
var _self = this;
function loadCssCode(code) {
var style = document.createElement('style');
style.type = 'text/css';
style.rel = 'stylesheet';
try {
//for Chrome Firefox Opera Safari
style.appendChild(document.createTextNode(code));
} catch (ex) {
//for IE
style.styleSheet.cssText = code;
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
var div = document.createElement("div");
div.innerHTML = '<div' +
' class="common_modal" id="common_modal">' +
' <div class="common_modal_container">' +
' <div class="common_modal_header">' +
' <div class="common_modal_header_container">' +
' <div id="common_modal_header_title" class="common_modal_header_title" >' + _self.modalTitle + '</div>' +
' </div>' +
' <div id="common_modal_body" class="common_modal_body">' + _self.modalContent +'</div>' +
' <div id="common_modal_btn_group" class="common_modal_btn_group">' +
' </div>' +
' </div>' +
' </div>' +
' </div>';
document.body.insertBefore(div, document.body.firstElementChild);
loadCssCode('.common_modal{position: fixed;width: 100%;height: 100%;z-index: 999999;box-sizing: border-box;background-color: rgba(51, 51, 51, 0.47);top: 0;left: 0;right: 0;bottom: 0;display:none;}');
loadCssCode('.common_modal_header{width: 100%;color: #333;border-radius: 6px;}');
loadCssCode('.common_modal_header_container{padding: 0px;border: none;display: table;width:100%;}');
loadCssCode('.common_modal_header_title{color:' + _self.modalColor + ';width:100%;padding: 15px;text-align: center;border-top-left-radius: 5px;border-top-right-radius: 5px;font-size: 18px;font-weight: 500;box-sizing: border-box;}');
loadCssCode('.common_modal_body{position: relative;padding: 0 15px;margin: 15px 0;box-sizing: border-box;text-align:center}');
loadCssCode('.common_modal_btn_group{text-align: center;box-sizing: border-box;border-top: 1px solid #e3e3e3;}');
// loadCssCode('.common_modal_btn{color: #fff;background-color: ' + _self.modalColor + ';border-color: ' + _self.modalColor + ';width: 45%;text-align: center;border-radius: 4px;box-sizing: border-box;padding: 6px 12px;display: inline-block;cursor: pointer;}');
loadCssCode('.common_modal_btn{height:60px;line-height:50px;color: #fff;width: 45%;text-align: center;box-sizing: border-box;padding: 6px 12px;display: inline-block;cursor: pointer;color:#3aaaf8;}');
loadCssCode('.common_modal_btn_right{margin-left: 15px;}');
if (_self.isMobile()) {//移动端样式
loadCssCode('.common_modal_container{width: 300px;margin: 40% 10px 10px;background: #fff;color: #333;border-radius: 6px;box-shadow: 0 5px 15px rgba(0,0,0,.5);border:1px solid rgba(0,0,0,0.2);position: absolute !important;top: 50% !important;margin-top: -125px !important;left: 50% !important;margin-left: -150px !important;}');
} else {//PC样式
loadCssCode('.common_modal_container{width: 400px;margin: 15% auto 0;background: #fff;color: #333;border-radius: 6px;box-shadow: 0 5px 15px rgba(0,0,0,.5);border:1px solid rgba(0,0,0,0.2);;position: absolute !important;top: 50% !important;margin-top: -125px !important;left: 50% !important;margin-left: -200px !important;}');
}
},
open: function (_options) {
var _self = this;
var options = {
modalTitle: _options.modalTitle || _self.modalTitle,
text: '' || _options.text,
color: _options.color || _self.modalColor,
buttons: _options.buttons || _self.buttonArray,
textAlign: _options.textAlign
};
if (_options.textAlign == 'left' || _options.textAlign == 'right' || _options.textAlign == 'center') {
document.getElementById('common_modal_body').style.textAlign = _options.textAlign;
}
if (options.color != _self.modalColor) {
document.getElementsByClassName('common_modal_header_title')[0].style.color = options.color;
} else {
document.getElementsByClassName('common_modal_header_title')[0].style.color = _self.modalColor;
}
if (options.text.indexOf("(温馨提示)") > -1) { //后台的提示
options.text = options.text.replace("(温馨提示)", '');
options.modalTitle = "温馨提示";
}
else if (options.text.indexOf("(系统提示)") > -1) { //核心的提示
options.text = options.text.replace("(系统提示)", '');
options.modalTitle = "系统提示";
}
else {
options.modalTitle = "温馨提醒";
}
document.getElementById('common_modal_header_title').innerText = options.modalTitle;
document.getElementById('common_modal_body').innerText = options.text;
//遍历按钮
var btnStr = '';
for (var i = 0; i < options.buttons.length; i++) {
var btn = options.buttons[i];
btnStr += '<div id="common_btn_' + i + '" class="common_modal_btn color_' + window.color + '_important ">' + btn.text + '</div>'
}
document.getElementById('common_modal_btn_group').innerHTML = btnStr;
for (var i = 0; i < options.buttons.length; i++) {
(function (i) {
if(options.buttons.length == 1){
// document.getElementsByClassName('common_modal_btn')[i].style.width = '45%';
document.getElementsByClassName('common_modal_btn')[i].style.width = '100%';
// document.getElementsByClassName('common_modal_btn')[i].style.marginLeft = '2.5%';
// document.getElementsByClassName('common_modal_btn')[i].style.marginRight = '2.5%';
}else if(options.buttons.length>1){
var btnWidth = (100/options.buttons.length)*0.9;
var marginWidth = (100/options.buttons.length)*0.1*0.5;
document.getElementsByClassName('common_modal_btn')[i].style.width = btnWidth+'%';
document.getElementsByClassName('common_modal_btn')[i].style.marginLeft = marginWidth+'%';
document.getElementsByClassName('common_modal_btn')[i].style.marginRight = marginWidth+'%';
document.getElementById('common_btn_0').style.borderRight = '1px solid #e3e3e3';
}
// document.getElementsByClassName('common_modal_btn')[i].style.backgroundColor = options.color;
// document.getElementsByClassName('common_modal_btn')[i].style.borderColor = options.color;
document.getElementById('common_btn_' + i).onclick = function () {
document.getElementById('common_modal').style.display = 'none';
var callback = options.buttons[i].callback;
if(typeof callback == 'function'){
callback();
}
}
})(i)
}
document.getElementById('common_modal').style.display = 'block';
},
}
modal.init();
module.exports = modal;