html页面js样式alert弹出窗美化

弘毅

1. <script>
   
2.     window.alert = alert;
   
3.     function alert(data, callback) { //回调函数
   
4.         var alert_bg = document.createElement('div');
   
5.         alert_box = document.createElement('div'),
   
6.             alert_text = document.createElement('div'),
   
7.             alert_btn = document.createElement('div'),
   
8.             textNode = document.createTextNode(data ? data : ''),
   
9.             btnText = document.createTextNode('确 定');
   
10. 
    
11.         // 控制样式
    
12.         css(alert_bg, {
    
13.             'position': 'fixed',
    
14.             'top': '0',
    
15.             'left': '0',
    
16.             'right': '0',
    
17.             'bottom': '0',
    
18.             'background-color': 'rgba(0, 0, 0, 0.1)',
    
19.             'z-index': '999999999'
    
20.         });
    
21. 
    
22.         css(alert_box, {
    
23.             'width': '270px',
    
24.             'max-width': '90%',
    
25.             'font-size': '16px',
    
26.             'text-align': 'center',
    
27.             'background-color': '#fff',
    
28.             'border-radius': '15px',
    
29.             'position': 'absolute',
    
30.             'top': '50%',
    
31.             'left': '50%',
    
32.             'transform': 'translate(-50%, -50%)'
    
33.         });
    
34. 
    
35.         css(alert_text, {
    
36.             'padding': '10px 15px',
    
37.             'border-bottom': '1px solid #ddd'
    
38.         });
    
39. 
    
40.         css(alert_btn, {
    
41.             'padding': '10px 0',
    
42.             'color': '#007aff',
    
43.             'font-weight': '600',
    
44.             'cursor': 'pointer'
    
45.         });
    
46. 
    
47.         // 内部结构套入
    
48.         alert_text.appendChild(textNode);
    
49.         alert_btn.appendChild(btnText);
    
50.         alert_box.appendChild(alert_text);
    
51.         alert_box.appendChild(alert_btn);
    
52.         alert_bg.appendChild(alert_box);
    
53. 
    
54.         // 整体显示到页面内
    
55.         document.getElementsByTagName('body')[0].appendChild(alert_bg);
    
56. 
    
57.         // 确定绑定点击事件删除标签
    
58.         alert_btn.onclick = function() {
    
59.             alert_bg.parentNode.removeChild(alert_bg);
    
60.             if (typeof callback === 'function') {
    
61.                 callback(); //回调
    
62.             }
    
63.         }
    
64.     }
    
65. 
    
66.     function css(targetObj, cssObj) {
    
67.         var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
    
68.         for (var i in cssObj) {
    
69.             str += i + ':' + cssObj[i] + ';';
    
70.         }
    
71.         targetObj.style.cssText = str;
    
72.     }
    
73. 
    
74.     alert('提示信息!', function() {
    
75.         window.location.href = 'http://www.ltxbbs.cn';
    
76.     });
    
77. </script>

复制代码