dialog box effect demo with floating layer centered
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd "> <ptml xml:lang=" Zn "xmlns=" http://www.w3.org/1999/xhtml "> <HEAD> <TITLE> Floating Layer Centered dialog box effect demo </TITLE> <fck:meta http-equiv=content-type content= "application/xhtml+xml; charset=gb2312 "/> <style type=text/css> HTML {height:100%} body {height:100%} body {font-size:1 4px; Font-family:tahoma, Verdana, Sans-serif} div.neat-dialog-cont {z-index:98; Background:none Transparent scroll repeat 0% 0%; left:0px; width:100%; Position:absolute; top:0px; height:100%} DIV.NEAT-DIALOG-BG {Z-INDEX:-1; Filter:alpha (opacity=70); left:0px; width:100%; Position:absolute; top:0px; height:100%; Background-color: #eee; opacity:0.7} div.neat-dialog {border-right: #555 1px solid; Border-top: #555 1px solid; z-index:99; Margin-left:auto; Border-left: #555 1px solid; width:30%; Margin-right:auto; border-BOTTOM: #555 1px solid; position:relative; top:25%; Background-color: #fff} div.neat-dialog-title {padding-right:0.3em; Padding-left:0.3em; Font-size:0.8em; Padding-bottom:0.1em; margin:0px; Line-height:1.2em; Padding-top:0.1em; Border-bottom: #444 1px solid; Position:relative} img.nd-cancel {right:0.2em; Position:absolute; TOP:0.2EM} div.neat-dialog P {padding-right:0.2em; Padding-left:0.2em; Padding-bottom:0.2em; Padding-top:0.2em; Text-align:center} </STYLE> <script type=text/javascript> function Neatdialog (SHTML, Stitle, bcancel) { Window.neatdialog = null; This.elt = null; if (document.createelement && document.getElementById) {var dg = document.createelement ("div"); Dg.classname = "Neat-dialog"; if (stitle) SHTML = ' <div class= ' neat-dialog-title ' > ' +stitle+ ((bcancel)? ': ' + ' </div>\n ' + SHTML; dg.innerhtml = SHTML; var dbg = document.createelement ("div"); Dbg.id = "ND-BDG"; Dbg.classname = "NEAT-DIALOG-BG "; var DGC = document.createelement ("div"); Dgc.classname = "Neat-dialog-cont"; Dgc.appendchild (DBG); Dgc.appendchild (DG); Adjust positioning if body has a margin if (Document.body.offsetLeft > 0) dgc.style.marginLeft = document.body.offs Etleft + "px"; Document.body.appendChild (DGC); if (bcancel) document.getElementById ("Nd-cancel"). onclick = function () {window.neatDialog.close (); }; This.elt = DGC; Window.neatdialog = this; } NeatDialog.prototype.close = function () {if (this.elt) {this.elt.style.display = ' none '; This.elt.parentNode.removeChild (This.elt); } Window.neatdialog = null; function OpenDialog () {var SHTML = ' <p> What you see now is a layer window that is ejected by JS Control, www.jb51.net cloud-dwelling community! </p> ' + ' <p><button onclick= ' window.neatDialog.close () ' > Close </button></p> '; New Neatdialog (SHTML, "Welcome!", false); } </SCRIPT> <BODY> <H1> floating Layer Center effect </H1> <button onclick=opendialog () > Point this demo effect </button> </BODY></HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
