Modify pop-up window style

You can customize only one pop-up window style

The first thing to understand is that alert is just a method, and this method is native code inside, which is the part we can't modify, and the only way to expose it is the alert method name, and you can't even get the alert property. Therefore, it is not feasible to modify the alert style in real sense.

With the above conditions in place, all we can do is rewrite the alert method and replace the alert method that comes with the system.

Replace Alert method with one line of code

1. Window.alert = function {};

See this, there are a lot of people already understand, first you can write a fake pop-up window style, and then show it in this way, this is the HTML CSS JS three-side changes to achieve the effect, you can also all JavaScript to complete the structure of the operation of the style, Today our example is all through JS to complete the structure style control.

Clear the basic way is to replace the alert method, then start to further consider the implementation steps.

steps to implement a custom alert method

Determine pop-up style HTML structure--structure insert--style control--click OK to delete structure

Determine structure

1. <div>

2. <p>alert content </p>

3. <div> OK </div>

4. </div>

using the JS processing structure

So here's the code:

1. Window.alert = alert;

2. function alert (data) {

3. var a = document.createelement ("div"),//create outermost label

4. p = document.createelement ("P"),//create P label for display content

5. BTN = document.createelement ("div"),//Create button label

6. Textnode = document.createTextNode (data),//Create a text node

7. Btntext = document.createTextNode ("OK");//Create Text node

8. Internal structure nesting

9. P.appendchild (Textnode);//Insert the content node you want to display in the P tag

10. Btn.appendchild (Btntext);//Insert the button text into the button label

11. A.appendchild (P);//insert P tag into the perimeter div

12. A.appendchild (BTN);//Insert the button into the perimeter div

13. Overall display in the page

14. document.getElementsByTagName ("Body") [0].appendchild (a);

15. }

Why not use Window.alert = function {} Directly here, the method is that the pre-compilation is not assigned to Window.alert, if written in this way, in Window.alert = function {} The previous call to alert will also be the system's own alert.

When you first call alert, if you do not pass parameters will be error, then we need a data judgment, Textnode = document.createTextNode (data) can be changed to Textnode = document.createTextNode (Data data: "")

optimize the current JS code

Next we will find that we also lack the style and determine the shutdown function. It is entirely possible to bind with DOM0-level events. The code quickly becomes like this:

1. Window.alert = alert;

2. function alert (data) {

3. var a = document.createelement ("div"),

4. p = document.createelement ("P"),

5. BTN = document.createelement ("div"),

6. Textnode = document.createTextNode (Data data: ""),

7. Btntext = document.createTextNode ("OK");

8. Internal structure nesting

9. P.appendchild (Textnode);

10. Btn.appendchild (Btntext);

11. A.appendchild (P);

12. A.appendchild (BTN);

13. Overall display in the page

14. document.getElementsByTagName ("Body") [0].appendchild (a);

15. OK binding fixed point Click event Delete label

16. Btn.onclick = function {

17. A.parentnode.removechild (a);

18. }

19. }

Style control

There is one last style control problem left. In order to be more beautiful and convenient to write, we need to write a method to control the style.

1. function css (targetobj, cssobj) {

2. for (var i in cssobj) {

3. Targetobj.style[i] = Cssobj[i];

4. }

5. }

This way we can control the style as follows:

1. CSS (target, {

2. "Background-color": "Red",

3. "Text-align": "Center",

4. })

Wait Wait, it's not over yet.

After the test found, such as on the style of writing, IE8 below there are rendering problems, then we switch to Csstext. Therefore, the style control code is changed to-

1. function css (targetobj, cssobj) {

2. var str = targetobj.getattribute ("style")? Targetobj.getattribute ("style"): "";

3. for (var i in cssobj) {

4. str + = i + ":" + cssobj[i] + ";";

5. }

6. TargetObj.style.cssText = str;

7. }

This will solve the IE8 embarrassment, but also brings other problems, string concatenation, there may be duplicate attributes, so if you need to do a generic, you also need to check the string, but for this example is fully sufficient.

completed version of alert function

Our demo is like this (style or self-tuning, the following style is just a demonstration):

2. <! DOCTYPE html>

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

10. <TITLE>HTML5 Academy-Alert</title>

14. <body>

16. <script>

18. Window.alert = alert;

20. function alert (data) {

22. var a = document.createelement ("div"),

24. p = document.createelement ("P"),

26. BTN = document.createelement ("div"),

28. Textnode = document.createTextNode (Data data: ""),

30. Btntext = document.createTextNode ("OK");

32. Control style

34. CSS (A, {

36. "Position": "Fixed",

38. "Left": "0",

40. "Right": "0",

42. "Top": "20%",

44. "width": "100px",

46. "Margin": "0 Auto",

48. "Background-color": "#f00",

50. "Font-size": "20px",

52. "Text-align": "Center"

54. });

56. CSS (BTN, {

58. "Background": "Blue",

60. })

62. Internal structure nesting

64. P.appendchild (Textnode);

66. Btn.appendchild (Btntext);

68. A.appendchild (P);

70. A.appendchild (BTN);

72. Overall display in the page

74. document.getElementsByTagName ("Body") [0].appendchild (a);

76. OK binding fixed point Click event Delete label

78. Btn.onclick = function {

80. A.parentnode.removechild (a);

82. }

84. }

86. function css (targetobj, cssobj) {

88. var str = targetobj.getattribute ("style")? Targetobj.getattribute ("style"): "";

90. for (var i in cssobj) {

92. str + = i + ":" + cssobj[i] + ";";

94. }

96. TargetObj.style.cssText = str;

98. }

100. alert (123);

102. </script>

104. </body>

Finally, this example applies the knowledge point, Dom operation, pre-compilation period and execution, for-in cycle, csstext. The main purpose of this article is to guide the idea, no matter what the project, the idea is very important, to know how to adapt, if you want to modify the alert style through certain properties, you want to break the head can not think of, all the effect of the implementation method is not unique, just need a you want the alert style, can "fake", The rational use of "fake" method, you can make your effect write more easily than others.

Modify pop-up style