Tip: you can modify some code before running
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><link href="http://www.lzlu.com/Google/js/box/s2/theme.css" rel="stylesheet" type="text/css" id="cssfile" /><script type="text/javascript">// Public function var fw ={}; fw. dom ={}; fw. ui ={}; fw. array ={}; fw.com. ui ={}; fw. isIE = !! Document. all; fw. isFF =! Fw. isIE; fw. getId = function (id) {return document. getElementById (id);} fw. get = function (v) {return typeof v = "string "? Fw. getId (v): v;} fw. setStyle = function (obj, st) {for (var I in st) {obj. style [I] = st [I] ;}} fw. create = function (parentObj, tag, args) {var obj = document. createElement (tag); if (args) {for (var item in args) {if (item = "style") {fw. setStyle (obj, args [item]);} else if (item = "range") {obj. style. position = "absolute"; fw. dom. setRange (obj, args [item]);} else if (item = "html") {obj. innerHTML = args.html;} else if (it Em = "className") {obj. className = args [item];} else {obj. setAttribute (item, args [item]) ;}} parentObj. appendChild (obj); return obj;} fw. bind = function () {var args = fw. array. clone (arguments); var obj = args. shift (); var method = args. shift (); // method. prototype; // assert method! = Null; if (typeof method! = "Function") {throw "Invalid method:" + method;} return function () {var iargs = []; for (var I = 0; I <arguments. length; I ++) {iargs. push (arguments [I]);} return method. apply (obj, args. concat (iargs);} fw. array. each = function (arr, callBack) {for (var I = 0, l = arr. length; I <l; I ++) {callBack (arr [I]) ;}} fw. array. clone = function (arr_old) {var arr_new = []; fw. array. each (arr_old, function (val) {Arr_new.push (val) ;}); return arr_new ;} fw. dom. getLeft = function (o) {return parseInt (o. style. left) | 0;} fw. dom. getTop = function (o) {return parseInt (o. style. top) | 0;} fw. dom. getXy = function (o) {return {x: fw. dom. getLeft (o), y: fw. dom. getTop (o) };} fw. dom. setLeft = function (o, px) {o. style. left = px + "px";} fw. dom. setTop = function (o, px) {o. style. top = px + "px";} fw. dom. setWidth = functi On (o, px) {o. style. width = px + "px";} fw. dom. setHeight = function (o, px) {o. style. height = px + "px";} fw. dom. setXy = function (o, x, y) {fw. dom. setLeft (o, x); fw. dom. setTop (o, y);} fw. dom. setSize = function (o, w, h) {fw. dom. setWidth (o, w); fw. dom. setHeight (o, h);} fw. dom. setRange = function (o, r) {fw. dom. setXy (o, r [0], r [1]); fw. dom. setSize (o, r [2], r [3]);} if (fw. isIE) {fw. event = function ( ) {Var e = window. event; if (! E.targetappse.tar get = e. srcElement;} return e;} fw. capture = {start: function (obj) {obj. setCapture () ;}, end: function (obj) {obj. releaseCapture () ;}} else {fw. event = function () {var e, f = arguments. callee; while (f = f. caller) {if (e = f. arguments [0]) &/Event /. test (e. constructor. toString () {return e ;}} fw. capture = {start: function (obj) {window. captureEvents (Event. mouseMove | Event. mouseUp) ;}, end: function (obj) {window. releaseEvents (Event. mouseMove | Event. mouseUp) ;}}// drag fw. ui. drag = function (obj) {obj = fw. get (obj); obj. style. position = "absolute"; var isMoveAble = false; var xy; obj. onmousedown = function () {fw. capture. start (obj); isMoveAble = true; var evt = fw. event (); xy = fw. dom. getXy (obj); xy = {x: evt. clientX-xy. x, y: evt. clientY-xy. y} obj. onmousemove = function () {if (isMoveAble) {var evt = fw. event (); fw. dom. setXy (obj, evt. clientX-xy.x, evt. clientY-xy.y);} obj. onmouseup = function () {fw. capture. end (obj); isMoveAble = false ;}// window class fw.com. ui. window = function (json) {this. obj = {}; var html ='<div class="box-tl"><div class="box-tr"><div class="box-tc" id="fw.com.ui.window.title"></div></div></div><div class="box-ml"><div class="box-mr"><div class="box-mc" id="fw.com.ui.window.panel"></div></div></div><div class="box-bl"><div class="box-br"><div class="box-bc"></div></div></div><div class="box-tool"></div>'; This. obj. box = fw. create (document. body, "div", {className: "box", style: {position: "absolute", display: json. display? Json. display: ""}, html: html}); fw. getId ("fw.com. ui. window. close "). onclick = fw. bind (this, this. hide); fw. getId ("fw.com. ui. window. title "). innerHTML = json. title? Json. title: ""; with (fw. getId ("fw.com. ui. window. panel") {innerHTML = json.html? Json.html: ""; style. height = (json. range [3]-56) + "px";} fw. dom. setRange (this. obj. box, json. range); fw. ui. drag (this. obj. box);} // Display window fw.com. ui. window. prototype. show = function () {this. obj. box. style. display = "";} // hide the window fw.com. ui. window. prototype. hide = function () {this. obj. box. style. display = "none ";}</script></head><body><button onclick="oo.show();">Display window</button><script type="text/javascript">Var oo = new fw.com. ui. window ({range: [100,100,400,150], title: "My window", html :"<br/><br/>Very good, very powerful, not pornographic, not violent! ", Display:" none "});</script></body></html>
Tip: you can modify some code before running