Hello everyone, we usually use JavaScript, often need to provide users with some feedback, to complete this function there are many ways. But in peacetime development at noon we use the most likely is the function of alert (here only to say the general situation, not excluding individual master ~), the use of this function is indeed very convenient, can be very simple to provide users with some interactive information. But it also has a lot of deficiencies, such as his appearance is very simple
Single, and not controllable, and then it is a browser-level function, is implemented by the various browsers themselves, so in different browsers, its interface is not the same. If it was in the past, this might be a good situation.
Easy to be accepted by most users, but over time, users are increasingly looking for a better experience. So now we often see a lot of Web site JS made a variety of dialog boxes, these interfaces will be user body
Check up a lot, so today to say about this aspect of the content bar, get to the point, do not say nonsense ~
First of all to see the effect of the first to have an intuitive understanding:
As shown in the figure above, after my test, this dialog box can be used in several mainstream browsers such as IE6 7 8,firefox,chrome. Now let's take a look at his code.
First, we need to determine the type of browser, where several bool variables are used to represent different browsers.
Copy Code code 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, this is a relatively simple way to judge different browsers by detecting the agent headers.
Here we start to construct our dialog box, before we construct the dialog box, we have to create a modal form effect (that is, when the dialog box is bouncing out, the user can not manipulate the rest of the page), here we use a black transparent layer to achieve this effect.
Copy Code code 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,0,0,0.7)";
} else {
DivBackground.style.backgroundColor = "#000000";
DivBackground.style.filter = "Alpha (opacity=70)";
}
DivBackground.style.zIndex = "99";
Document.body.appendChild (Divbackground);
The code above, we first prohibit the browser scroll bar to prevent users in the pop-up dialog box when scrolling browser window, then set the appropriate style, a more important is 8-13 lines, here according to the type of browser to apply different CSS styles to achieve transparent effect, for IE browser, We use IE's own filter function, and for other browsers, we use the CSS3-based Rgba method to achieve transparency.
Next, we'll construct the dialog box, where we first create a div layer to represent our entire dialog box. The method is as follows:
Copy Code code 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, first based on the words of the message to calculate the size of the dialog box (the calculation method here is not necessarily the best, if there is a better calculation method is also hope that everyone advice), the following DOM code will not need me to explain it.
Next, we create the title bar of the dialog box, which displays the title of the dialog box, and uses it to implement the drag operation of the dialog box.
Copy Code code 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 the mouse down and bounce events, here to the Div object added a dragging attribute, to represent whether the dialog box is being dragged (this is also one of the characteristics of JS, A method that specifies a new property for an object of type object: If the object does not have this property, you can add a new property to the object by using the object name. Property name = "Value", in the event of mouse movement, we decide whether to move the dialog box by the object's dragging property. About the mobile location of the dialog box, here I am lazy ~ did not determine the relative position of the dialog box and the mouse, but gave a constant, so every time you start dragging, the dialog box will be a little "transient", interested friends can help improve, hehe.
Finally, the creation of the content area of the dialog box:
Copy Code code 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/><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 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);
There should be no more explanation here, a little bit, that is, in 13-22 lines of code, which is based on different browsers to achieve the gradient, ie, with the gradient provided by Microsoft, WebKit or Gecko kernel browser using the corresponding CSS3 standard can also achieve the gradient effect.
Finally, this method supports most browsers, individual browsers if not fully supported, but also please forgive me, look forward to a more comprehensive approach to discuss together, the following is an example, interested friends can see. Reprint please indicate the source ~
Sample files: JS dialog box implementation
