<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> darken div drag prompt window </title> <script language=" JavaScript "> function Alertwin (title, MSG, W, h) {var titleheight = "22px";//Hint window title height var bordercolor = "#666699";//Hint window border color var titlecolor = "#FFFFFF"; Hint window title color var titlebgcolor = "#666699"; Hint window title background color var bgcolor = "#FFFFFF"; The background color of the hint content var iwidth = document.documentElement.clientWidth; var iheight = document.documentElement.clientHeight; var bgobj = document.createelement ("div"); BgObj.style.cssText = "Position:absolute;left:0px;top:0px;width:" +iwidth+ "Px;height:" +math.max ( Document.body.clientHeight, iheight) + "Px;filter:alpha (opacity=30); Opacity:0.3;background-color: #000000; z-index:101; "; Document.body.appendChild (Bgobj); var msgobj=document.createelement ("div"); MsgObj.style.cssText = "position:absolute;font:11px ' song Body"; Top: "+ (iheight-h)/2+" Px;left: "+ (IWIDTH-W)/2+" Px;width: "+ w+ "Px;height: +h+" px;text-align:center;border:1px solid "+bordercolor+" Background-color: "+bgcolor+";p adding:1px ; line-height:22px;z-index:102; "; Document.body.appendChild (Msgobj); var table = document.createelement ("table"); Msgobj.appendchild (table); Table.style.cssText = "margin:0px;border:0px;padding:0px;"; table.cellspacing = 0; var tr = Table.insertrow (-1); var titlebar = Tr.insertcell (-1); TitleBar.style.cssText = "Width:100%;height:" +titleheight+ "Px;text-align:left;padding:3px;margin:0px;font:bold 13px ' song body '; color: "+titlecolor+"; border:1px solid "+ bordercolor +"; Cursor:move;background-color: "+ titlebgcolor; TitleBar.style.paddingLeft = "10px"; titlebar.innerhtml = title; var MoveX = 0; var moveY = 0; var movetop = 0; var moveLeft = 0; var moveable = false; var docmousemoveevent = Document.onmousemove; var docmouseupevent = Document.onmouseup; Titlebar.onmousedown = function () {var evt = getEvent (); moveable = true; MoveX = Evt.clientx; Movey = Evt.clienty; Movetop = parseint (msgObj.style.top); MoveLeft = parseint (msgObj.style.left); Document.onmousemove = function () {if (moveable) {var evt = getEvent (); var x = moveLeft + Evt.clientx-movex; var y = movetop + Evt.clienty-movey; if (x > 0 && (x + W < iwidth) && y > 0 && (y + H < iheight)) { MsgObj.style.left = x + "px"; MsgObj.style.top = y + "px"; } } }; Document.onmouseup = function () {if (Moveable) {document.onmousemove = docmousemoveevent; Document.onmouseup = docmouseupevent; moveable = false; MoveX = 0; Movey = 0; movetop = 0; MoveLeft = 0; } }; var closebtn = Tr.insertcell (-1); CloseBtn.style.cssText = "Cursor:pointer; Padding:2px;background-color: "+ titlebgcolor; closebtn.innerhtml = "<span +titlecolor+"; >x</span> "; Closebtn.onclick = function () {document.body.removeChild (bgobj); Document.body.removeChild (Msgobj); var MsgBox = Table.insertrow ( -1). InsertCell (-1); MsgBox.style.cssText = "font:10pt ' song Body ';"; Msgbox.colspan = 2; msgbox.innerhtml = msg; Get event Events object for compatibility with IE and Firefox function getEvent () {return window.event | | arguments.callee.caller.arguments [0]; }} </script> </pead>;body> <input type= "button" value= "dot Here" onclick= "Alertwin (' title ', ' Here is content ', 300,200);"/> </body> </ptml >
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
IE7.0, Firefox2.0, Opera9.0 test Pass
You are welcome to advise criticism
Some time ago has been studying JS, the Internet has a lot of browser-compatible articles, for everyone to find a few:
Http://blog.csdn.net/zqian1987/archive/2008/03/02/2140055.aspx
Http://www.cnblogs.com/jacklong/archive/2008/01/10/1033954.html
The following write my experience of this period of time, the main introduction of compatible IE and Firefox, Opera9.0 version as if n many things do not support, temporarily do not introduce, Opera9.0 later version in JavaScript interpretation and Firefox is closer.
I am introducing a few details, focusing on writing some unusual situations and thinking of new things I will continue to add:
1, the creation of an element, the general wording of createelement ("div")
IE can also write createelement ("<div style= ' color: #FFFFFF ' >"), but Firefox does not recognize
2, ie in the width, height and Firefox concept is different, ie in the Width=firefox in the width+2*borderwidth+2*padding
See also: http://help.powereasy.net/Template/WEB/1557.html
3, dynamic add CSS Code
Cssstr = "P {color: #FF0000;} a {font-size:9pt;} ";
var style = Win.document.createStyleSheet ();
Style.csstext = Cssstr; FireFox: Copy Content to Clipboard code:
Cssstr = "P {color: #FF0000;} a {font-size:9pt;} ";
var style = Win.document.createElement ("style");
Style.type = "Text/css";
style.innerhtml = Cssstr;
Win.document.getElementsByTagName ("Head"). Item (0). appendchild (style); 4, table after adding rows or columns, universal writing InsertRow ( -1), InsertCell (-1)
ie in InsertRow (), InsertCell () This can be written, Firefox does not recognize
5, Warning dialog box alert (), ie in writing without parameters is the default parameter is an empty string, Firefox, you must enter parameters, the parameters are written alert ("");
6, to Element.style.width assignment must be written 24px, only write the number 24, Firefox will not recognize, ie can be
7, in the use of element, and to its binding onclick, onmouseover, onmousedown, onmouseout and other events
Element.onclick = function () {alert ("Hello Kitty");
, you should pay attention to
You use AppendChild to add this element to a parent element, and you cannot use the innerHTML action in your superiors, which invalidates the event
