Here I have a few custom alert popover components:
1: the alert popover component with certain cancellation: the effect is shown below
Code:
/** * custom public function */
const utils =
{
/ * * *@name: custom alert(ok, cancel) *@author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-23
* @param: data string Indicates the displayed text *@param: callbackTure function Click ok callback function *@param: callbackFalse function Cancel the callback function */
alert(data: any, callbackTure: any = ' ', callbackFalse:any = ' ')
{
var alert_bg = document.createElement('div');
var alert_box = document.createElement('div');
var alert_text = document.createElement('div');
var alert_btn_true = document.createElement('div');
var alert_btn_false = document.createElement('div');
var textNode = document.createTextNode(data ? data : ' ')
var btnText_false = document.createTextNode('take away');
var btnText_true = document.createTextNode('determine');
// Control the background style
utils.setCss(alert_bg, {
'position': 'fixed'.'top': '0'.'left': '0'.'right': '0'.'bottom': '0'.'background-color': 'rgba (0, 0, 0, 0.1)'.'z-index': '999999999'
});
// Control the prompt box style
utils.setCss(alert_box, {
'width': '350px'.'max-width': '90%'.'font-size': '18px'.'text-align': 'center'.'background-color': '#fff'.'border-radius': '15px'.'position': 'absolute'.'top': '40%'.'left': '50%'.'transform': 'translate(-50%, -50%)'
});
// Control the prompt font style
utils.setCss(alert_text, {
'padding': '32px 15px'.'border-bottom': '1px solid #ddd'
});
// Control determines the button style
utils.setCss(alert_btn_true, {
'padding': '10px 0'.'color': '#007aff'.'font-weight': '600'.'cursor': 'pointer'.'float':'right'.'text-align': 'center'.'width': '49%'});// Controls the cancel button style
utils.setCss(alert_btn_false, {
'padding': '10px 0'.'color': '#007aff'.'font-weight': '600'.'cursor': 'pointer'.'float': 'right'.'text-align': 'center'.'width': '50%'.'border-right': '1px solid #CCC'});// The internal structure is inserted
alert_text.appendChild(textNode);
alert_btn_true.appendChild(btnText_true);
alert_btn_false.appendChild(btnText_false);
alert_box.appendChild(alert_text);
alert_box.appendChild(alert_btn_true);
alert_box.appendChild(alert_btn_false);
alert_bg.appendChild(alert_box);
// Display the entire page
document.getElementsByTagName('body') [0].appendChild(alert_bg);
// Make sure the button is bound to the click event
alert_btn_true.onclick = function () {
// alert_bg.parentNode.removeChild(alert_bg);
if (typeof callbackTure === 'function')
{
callbackTure(); / / callback
}
utils.setCss(alert_bg, {
'display': 'none'
});
}
// Unbind the button from the click event
alert_btn_false.onclick = function () {
if (typeof callbackFalse === 'function')
{
callbackFalse(); / / callback
}
else if (typeof callbackTure === 'function')
{
callbackTure(); / / callback
}
utils.setCss(alert_bg, {
'display': 'none'}); }},/ * * *@name: Custom alert adds CSS *@author: camellia
* @email: guanchao_gc@qq.com
* @date: the 2021-01-23 * /
setCss(targetObj:any, cssObj:any) {
var str = targetObj.getAttribute("style")? targetObj.getAttribute('style') : ' ';
for (var i in cssObj)
{
str += i + ':' + cssObj[i] + '; '; } targetObj.style.cssText = str; }},Copy the codeCall example:
utils
.
alertLoadExec
(
false
);
Copy the code2: custom alert, disappear at custom time (imitation layer), the effect is shown below:
Code:
/** * custom public function */
const utils =
{
/ * * *@name: custom alert, disappear at custom time *@author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-23
* @param: data string Indicates the displayed text *@param: callbackTure function Click ok callback function *@param: time number Displays the time */
alertMsg(time: number, data: any = ' ', callbackTure: any = ' ') {
var alert_bg = document.createElement('div');
var alert_box = document.createElement('div');
var alert_text = document.createElement('div');
var textNode = document.createTextNode(data ? data : ' ')
// Control the background style
utils.setCss(alert_bg, {
'position': 'fixed'.'top': '0'.'left': '0'.'right': '0'.'bottom': '0'.'z-index': '999999999'
});
// Control the prompt box style
utils.setCss(alert_box, {
'width': '100%'.'max-width': '90%'.'font-size': '18px'.'text-align': 'center'.'border-radius': '15px'.'position': 'absolute'.'top': '40%'.'left': '50%'.'transform': 'translate(-50%, -50%)'
});
if (data)
{
// Control the prompt font style
utils.setCss(alert_text, {
'width': '350px'.'border-bottom': '1px solid #ddd'.'padding': '16px 10px'.'color': 'white'.'background-color': 'rgba (0, 0, 0, 0.7)'.'opacity': 1.'border-radius': '4px'.'margin': 'auto'}); }else
{
// Control the load image display style
utils.setCss(alert_text, {
'width': '100px'.'height':'100px'.'background':' url("/src/assets/img/loading-0.gif") no-repeat center'.'margin':'auto'
});
}
// The internal structure is inserted
alert_text.appendChild(textNode);
alert_box.appendChild(alert_text);
alert_bg.appendChild(alert_box);
// Display the entire page
document.getElementsByTagName('body') [0].appendChild(alert_bg);
setTimeout(function () {
if (typeof callbackTure === 'function') {
callbackTure(); / / callback
}
// Popover disappears ~
utils.setCss(alert_bg, {
'display': 'none'
});
}, time);
},
/ * * *@name: Custom alert adds CSS *@author: camellia
* @email: guanchao_gc@qq.com
* @date: the 2021-01-23 * /
setCss(targetObj:any, cssObj:any) {
var str = targetObj.getAttribute("style")? targetObj.getAttribute('style') : ' ';
for (var i in cssObj)
{
str += i + ':' + cssObj[i] + '; '; } targetObj.style.cssText = str; }},Copy the codeCall instance:
utils
.
alertMsg
(
2000
,
'Send message cannot be empty! '
);
Copy the code3. User-defined loading: Make it disappear when it needs to disappear.
Loading is displayed before sending a request, and after the server returns data, loading disappears. It’s a little feature like that.
The effect is shown below:
I define a global variable to store the LOADING DOM node.
/** * custom public function */
const utils =
{
/ * * *@name: The following custom loading uses the node *@author: camellia
* @email: guanchao_gc@qq.com
* @date: the 2021-02-22 21:28:32 * /
element : ' './ * * *@name: Display loading (prompt) *@author: camellia
* @email: guanchao_gc@qq.com
* @date: the 2021-02-22 21:32:27 *@param: sign Boolean true: display, false: delete *@param: MSG string prompt */
alertLoadExec(sign:any,msg:any=' ')
{
if(sign)
{
utils.element = utils.alertLoading(true, msg);
}
else
{
if(utils.element) { utils.alertLoading(utils.element); }}},/ * * *@name: Custom loading, true/false *@author: camellia
* @email: guanchao_gc@qq.com
* @date: 2021-01-23
* @param: sign Boolean true: display, false: delete *@param: MSG string prompt */
alertLoading(sign:any,msg:any=' ')
{
if (sign === true)
{
var alert_bg = document.createElement('div');
var alert_box = document.createElement('div');
var alert_text = document.createElement('div');
var textNode = document.createTextNode(msg ? msg : ' ')
// Control the background style
utils.setCss(alert_bg, {
'position': 'fixed'.'top': '0'.'left': '0'.'right': '0'.'bottom': '0'.'z-index': '999999999'
});
// Control the prompt box style
utils.setCss(alert_box, {
'width': '100%'.'max-width': '90%'.'font-size': '18px'.'text-align': 'center'.'border-radius': '15px'.'position': 'absolute'.'top': '40%'.'left': '50%'.'transform': 'translate(-50%, -50%)'
});
if (msg)
{
// Control the prompt font style
utils.setCss(alert_text, {
'width': '350px'.'border-bottom': '1px solid #ddd'.'padding': '16px 10px'.'color': 'white'.'background-color': 'rgba (0, 0, 0, 0.7)'.'opacity': 1.'border-radius': '4px'.'margin': 'auto'}); }else
{
// Control the load image display style
utils.setCss(alert_text, {
'width': '100px'.'height': '100px'.'background': ' url("/src/assets/img/loading-0.gif") no-repeat center'.'margin': 'auto'
});
}
// The internal structure is inserted
alert_text.appendChild(textNode);
alert_box.appendChild(alert_text);
alert_bg.appendChild(alert_box);
// Display the entire page
document.getElementsByTagName('body') [0].appendChild(alert_bg);
return alert_bg;
}
else
{
// for(var i = 0; i< sign.length; i++)
/ / {
// var _parentElement = sign[i].parentNode;
var _parentElement = sign.parentNode;
if (_parentElement) {
_parentElement.removeChild(sign);
}
// }}},/ * * *@name: Custom alert adds CSS *@author: camellia
* @email: guanchao_gc@qq.com
* @date: the 2021-01-23 * /
setCss(targetObj:any, cssObj:any) {
var str = targetObj.getAttribute("style")? targetObj.getAttribute('style') : ' ';
for (var i in cssObj)
{
str += i + ':' + cssObj[i] + '; '; } targetObj.style.cssText = str; }},Copy the codeCall instance:
// Enable custom loading
utils.alertLoadExec(true);
// Disable custom loading
utils.alertLoadExec(false);
Copy the codeSo these are my custom alert display styles,
All are according to the needs of their own move, probably are wild way.
For good suggestions, please enter your comments below.
Welcome to my blog guanchao.site
Welcome to applets:
