<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <style> *{margin:0;padding:0;}. Login{background: White;Border:1px #000 Solid;position:Absolute; Left:0;Top:0;}. Title{Height:30px;background:Gray;Color: White;}. title. Close{float: Right;} </style> <Scripttype= "Text/javascript"src= "Res/js/jquery.min.js"></Script> <Scripttype= "Text/javascript"src= "Res/js/dialog.js"></Script></Head><Body><inputtype= "button"value= "1"><inputtype= "button"value= "2"><inputtype= "button"value= "3"><Script>window.onload= function(){ varAinput=document.getElementsByTagName ('input'); ainput[0].onclick= function() {drag ({//Configuration ParametersInow:0, Title:'Login' }); }; ainput[1].onclick= function() {drag ({//Configuration ParametersInow:1, W: -, H: -, dir:' Right', Title:'Announcements' }); }; };</Script></Body></HTML>
;(function($, window, document,undefined) {functionDialog () { This. Ologin =NULL; This. Settings = {//Default Parametersw:300, H:300, dir:' Center ', Title:‘‘, Mark:false }; } Dialog.prototype.json= {}; Dialog.prototype.init=function(opt) {Extend ( This. settings, opt); if( This. json[opt.inow] = =undefined) { This. json[opt.inow] =true; } if( This. Json[opt.inow]) { This. Create (); This. Fnclose (); if( This. Settings.mark) { This. Createmark (); } This. json[opt.inow] =false; } }; Dialog.prototype.create=function(){ This. Ologin = document.createelement (' div '); This. Ologin.classname = ' Login '; This. ologin.innerhtml = ' <div class= ' title ' ><span> ' + This. Settings.title + ' </span><span class= "close" >x</span></div><div class= "Content" > </div> '; Document.body.appendChild ( This. Ologin); This. SetData (); }; Dialog.prototype.setData=function(){ This. OLogin.style.width = This. SETTINGS.W + ' px '; This. OLogin.style.height = This. settings.h + ' px '; if( This. Settings.dir = = ' Center ' ){ This. OLogin.style.left = (Viewwidth ()- This. Ologin.offsetwidth)/2 + ' px '; This. OLogin.style.top = (Viewheight ()- This. Ologin.offsetheight)/2 + ' px '; } Else if( This. Settings.dir = = ' Right ' ){ This. OLogin.style.left = (Viewwidth ()- This. ologin.offsetwidth) + ' px '; This. OLogin.style.top = (Viewheight ()- This. ologin.offsetheight) + ' px '; } }; Dialog.prototype.fnClose=function(){ varOclose = This. Ologin.getelementsbytagname (' span ') [1]; varthis = This; Oclose.onclick=function() {document.body.removeChild (this.ologin); if(This.settings.mark) {document.body.removeChild (This.omark); } This.json[this.settings.inow]=true; }; }; Dialog.prototype.createMark=function(){ varOmark = document.createelement (' div '); Omark.id= ' Mark '; Document.body.appendChild (Omark); This. Omark =Omark; OMark.style.width= Viewwidth () + ' px '; OMark.style.height= Viewheight () + ' px '; }; functionExtend (obj1,obj2) { for(varattrinchobj2) {Obj1[attr]=Obj2[attr]; } } functionviewwidth () {returnDocument.documentElement.clientWidth; } functionviewheight () {returnDocument.documentElement.clientHeight; } Window.drag=function(opt) {varlitdialog=NewDialog (); Litdialog.init (opt);}}) (JQuery, window, document);
Object-oriented development popup component