web前端

js重写alert事件，避免alert弹框标题出现网址

来源：https://blog.csdn.net/u011511210/article/details/54406226#

js代码：

1. window.alert = function(msg, callback) {  

2.     var div = document.createElement("div");  

3.     div.innerHTML = "<style type=\"text/css\">"  

4.             + ".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       "  

5.             + ".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            "  

6.             + ".nbaDialog { position: fixed; z-index: 5000; width: 80%; max-width: 300px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }"  

7.             + ".nbaDialog .nbaDialogHd { padding: .2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         "  

8.             + ".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           "  

9.             + ".nbaDialog .nbaDialogBd { padding: 0 .27rem; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; }                                                                                                                                          "  

10.             + ".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          "  

11.             + ".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               "  

12.             + ".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #09BB07; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       "  

13.             + ".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             "  

14.             + ".nbaDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }"  

15.             + "</style>"  

16.             + "<div id=\"dialogs2\" style=\"display: none\">"  

17.             + "<div class=\"nbaMask\"></div>"  

18.             + "<div class=\"nbaDialog\">"  

19.             + " <div class=\"nbaDialogHd\">"  

20.             + "     <strong class=\"nbaDialogTitle\"></strong>"  

21.             + " </div>"  

22.             + " <div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>"  

23.             + " <div class=\"nbaDialogHd\">"  

24.             + "     <strong class=\"nbaDialogTitle\"></strong>"  

25.             + " </div>"  

26.             + " <div class=\"nbaDialogFt\">"  

27.             + "     <a href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\" id=\"dialog_ok2\">确定</a>"  

28.             + " </div></div></div>";  

29.     document.body.appendChild(div);  

30.   

31.     var dialogs2 = document.getElementById("dialogs2");  

32.     dialogs2.style.display = 'block';  

33.   

34.     var dialog_msg2 = document.getElementById("dialog_msg2");  

35.     dialog_msg2.innerHTML = msg;  

36.   

37.     // var dialog_cancel = document.getElementById("dialog_cancel");  

38.     // dialog_cancel.onclick = function() {  

39.     // dialogs2.style.display = 'none';  

40.     // };  

41.     var dialog_ok2 = document.getElementById("dialog_ok2");  

42.     dialog_ok2.onclick = function() {  

43.         dialogs2.style.display = 'none';  

44.         callback();  

45.     };  

46. };  

html引用：

1. <!DOCTYPE html>  

2. <html>  

3. <head>  

4. <title>alert.html</title>  

5. <meta charset="UTF-8">  

6. <meta name="keywords" content="keyword1,keyword2,keyword3">  

7. <meta name="description" content="this is my page">  

8. <meta name="content-type" content="text/html; charset=UTF-8">  

9. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  

10.   

11. </head>  

12. <body>  

13.     This is my HTML page.  

14.     <br>  

15.     <script type="text/javascript" src="alert.js"></script>  

16.     <script type="text/javascript">  

17.         alert("哈哈哈！！！看，没有标题~_~");  

18.     </script>  

19. </body>  

20. </html>