Implementation Code of the custom dialog box implemented by js

Hello everyone, when we use Javascript, we often need to provide some feedback to users. There are many ways to complete this function. However, during normal development, the most commonly used alert function may be used at noon (Here we only talk about the general situation and do not rule out some experts ~), It is really convenient to use this function, and you can easily provide some interactive information to users. But it also has many shortcomings, such as its appearance is very simple

Single, and uncontrollable. In addition, it belongs to browser-level functions, which are implemented by various browsers. Therefore, the interfaces of different browsers are not the same. In the past, this situation may be quite satisfactory.

It is easy to be accepted by most users, but over time, users are increasingly hoping for a better experience. So now we often see various JS dialogs on many websites. These interfaces will be user bodies.

Verification has improved a lot, so let's talk about the content in this regard today. Let's get started with the question, and don't talk nonsense ~

First, let's take a look at the results. First, let's have an intuitive understanding:

As shown in, after my tests, this dialog box can be used in multiple mainstream browsers such as IE6 7 8, Firefox, and Chrome. Let's take a look at his code.
First, we need to determine the browser type. Here we use several bool variables to represent different browsers.
Copy codeThe Code is as follows:
Var springweb_typeIsIE = false;
Var springweb_typeIsGecko = false;
Var springweb_typeIsWebkit = false;
Var springweb_typeIsIE6 = false;
Var springweb_typeIsIE7 = false;
Var springweb_typeIsIE8 = false;
Var springweb_typeIsFireFox = false;
Var springweb_typeIsChrome = false;
Var springweb_typeIsSafari = false;
Var agent = window. navigator. userAgent;
If (agent. indexOf ("MSIE 6 ")! =-1 ){
Springweb_typeIsIE6 = true;
Springweb_typeIsIE = true;
}
Else if (agent. indexOf ("MSIE 7 ")! =-1 ){
Springweb_typeIsIE7 = true;
Springweb_typeIsIE = true;
}
Else if (agent. indexOf ("MSIE 8 ")! =-1 ){
Springweb_typeIsIE8 = true;
Springweb_typeIsIE = true;
}
Else if (agent. indexOf ("Firefox ")! =-1 ){
Springweb_typeIsFireFox = true;
Springweb_typeIsGecko = true;
} Else if (agent. indexOf ("Chrome ")! =-1 ){
Springweb_typeIsChrome = true;
Springweb_typeIsWebkit = true;
}
Else if (agent. indexOf ("Safari ")! =-1 ){
Springweb_typeIsSafari = true;
Springweb_typeIsWebkit = true;
}

As shown above, the agent header is checked to identify different browsers. This is a simple method of judgment.
The following describes how to create a dialog box. Before creating a dialog box, create a modal form (that is, when the dialog box pops up, users cannot operate the rest of the page). Here we use a black transparent layer to achieve this effect.
Copy codeThe Code is as follows:
Document. body. style. overflowY = "hidden ";
Var divBackground = document. createElement ("div ");
DivBackground. style. position = "absolute ";
DivBackground. style. left = "0px ";
DivBackground. style. top = "0px ";
DivBackground. style. width = "100% ";
DivBackground. style. height = "100% ";
If (springweb_typeIsChrome | springweb_typeIsFireFox ){
DivBackground. style. backgroundColor = "rgba (0.7, 0 )";
} Else {
DivBackground. style. backgroundColor = "#000000 ";
DivBackground. style. filter = "alpha (opacity = 70 )";
}
DivBackground. style. zIndex = "99 ";
Document. body. appendChild (divBackground );

In the above Code, we first disable the browser's scroll bar to prevent users from rolling the browser window in the pop-up dialog box, and then set the corresponding style. The more important one is 8-13 lines, here, we apply different CSS styles Based on the browser type to achieve transparent effect. For IE browser, we use the filter function that comes with IE. For other browsers, we use the rgba Method Based on CSS3 to achieve transparent results.
Next, we will construct the dialog box. Here we first create a div layer to represent our entire dialog box. The method is as follows:
Copy codeThe Code is as follows:
Var dialogWidth = 260;
Var dialogHeight = 120;
Var fontSize = 14;
Var lineWidth = document. body. clientWidth * 0.7;
If (fontSize * msg. length) <lineWidth ){
DialogWidth = parseInt (fontSize * msg. length) + 50;
} Else {
DialogWidth = parseInt (lineWidth );
DialogHeight + = parseInt (fontSize * msg. length)/lineWidth) * fontSize );
}
DivDialog. style. width = dialogWidth + "px ";
DivDialog. style. height = dialogHeight + "px ";
DivDialog. style. position = "absolute ";
DivDialog. style. border = "1px solid # C0D7FA ";
DivDialog. style. borderRight = "2px outset # DEDEDE ";
DivDialog. style. borderLeft = "2px outset # DEDEDE ";
DivDialog. style. left = (document. body. clientWidth/2)-(dialogWidth/2) + "px ";
DivDialog. style. top = (document. body. clientHeight/2)-(dialogHeight/2) + "px ";
DivDialog. style. zIndex = "100 ";

Here, the size of the dialog box is calculated based on the number of words in the message (the calculation method is not necessarily the best here. If there is a better calculation method, I hope you can advise ), I don't need to explain the DOM code later.
Next, we create the title bar of the dialog box, which is used to display the title of the dialog box and use it to drag the dialog box.
Copy codeThe Code is as follows:
Var divHead = document. createElement ("div ");
If (title! = Undefined ){
DivHead. innerHTML = title;
} Else {
DivHead. appendChild (document. createTextNode ("message "));
}
DivHead. style. width = "100% ";
DivHead. style. height = "25px ";
DivHead. style. lineHeight = "25px ";
DivHead. style. fontSize = "14px ";
DivHead. style. fontWeight = "bold ";
DivHead. style. borderBottom = "1px outset # 8989FF ";
DivHead. style. color = "white ";
DivHead. style. textIndent = "10px ";
DivHead. style. backgroundColor = "blue ";
DivHead. style. backgroundImage = "url ('" + springweb_basePath + "/images/headbg.png ')";
DivHead. style. cursor = "move ";
DivHead. onmousedown = function (){
DivDialog. dragging = true;
};
DivHead. onmouseup = function (){
DivDialog. dragging = false;
};
Document. body. onmousemove = function (e ){
If (! DivDialog. dragging) return;
E = e | window. event;
Var mouseX, mouseY;
Var mouseOffsetX, mouseOffsetY;
If (e. pageX | e. pageY ){
MouseX = e. pageX;
MouseY = e. pageY;
} Else {
MouseX =
E. clientX + document. body. scrollLeft-
Document. body. clientLeft;
MouseY =
E. clientY + document. body. scrollTop-
Document. body. clientTop;
}
DivDialog. style. left = (mouseX-dialogWidth * 0.4) + "px ";
DivDialog. style. top = (mouseY-10) + "px ";
};
DivDialog. appendChild (divHead );

Here, it is necessary to say that, when the mouse is pressed and the event is popped up, a dragging attribute is added to the div object, it indicates whether the dialog box is being dragged (this is also one of JS features. It specifies a method for specifying a new property for an object type object: if the previous object does not have this property, you only need to pass the object name. attribute name = "value" to add a new attribute to the object.) in the mouse movement event, we use the dragging attribute of the object to determine whether to move the dialog box, I am lazy about the location of the dialog box ~ Instead of judging the relative position of the dialog box and the mouse, a constant is provided, so that the dialog box will be "instantly moved" each time you start dragging. If you are interested, you can help improve it.
Finally, the dialog box content area is created:
Copy codeThe Code is as follows:
Var divContent = document. createElement ("div ");
DivContent. style. textAlign = "center ";
DivContent. style. padding = "15px ";
DivContent. style. fontSize = "12px ";
If (springweb_typeIsIE ){
DivContent. style. height = parseInt (dialogHeight-25) + "px ";
} Else {
DivContent. style. height = parseInt (dialogHeight-55) + "px ";
}
DivContent. style. backgroundColor = "# ffffff ";
If (springweb_typeIsIE6 | springweb_typeIsIE7 | springweb_typeIsIE8 ){
DivContent. style. filter =
"Progid: DXImageTransform. Microsoft. Gradient (gradientType = 1, startColorStr = # FFFFFF, endColorStr = # C2E2F8 )";
} Else if (springweb_typeIsFireFox ){
DivContent. style. backgroundImage =
"-Moz-linear-gradient (left, rgba (255,255,255, 1), rgba (194,226,248, 1 ))";
} Else if (springweb_typeIsWebkit ){
DivContent. style. backgroundImage =
"-Webkit-gardient (linear, 0% 0%, 100% 100%, from (# FFFFFF), to (#000000 ))";
}
DivContent. innerHTML = msg + "<br/> ";
DivDialog. appendChild (divContent );
Var closeButton = document. createElement ("img ");
CloseButton. style. cursor = "hand ";
CloseButton. setAttribute ("src", springweb_basePath + "/images/okButton.png ");
CloseButton. setAttribute ("alt", "OK ");
// The click event when the dialog is closing.
CloseButton. onclick = function (){
Document. body. removeChild (divBackground );
Document. body. removeChild (divDialog );
Document. body. style. overflowY = "";
};
DivContent. appendChild (closeButton );
DivDialog. focus ();
Document. body. appendChild (divDialog );

I don't need to explain more here. Let's just talk about the code in lines 13-22. This is based on different browsers to achieve different gradient effects. For IE, use the gradient provided by Microsoft, the browser of Webkit or Gecko kernel can use the corresponding CSS3 standard to achieve gradient effect.
Finally, this method supports most browsers. If some browsers do not fully support it, please forgive me and look forward to a more comprehensive discussion. The following is an example, if you are interested, you can check it out. Please indicate the source for reprinting ~
Example file: JS dialog box implementation