Home > Developer > JavaScript
This article mainly introduces the JavaScript click button after the pop-up transparent floating layer method, can be clicked button Pop-up Center transparent floating layer effect, involving JavaScript operation mouse events and page style related skills, need friends can refer to the following:
Click here to realize the page after the gray, and JS pop-up a center floating layer Hint window, this window is transparent, you can set the transparency, the Internet has a lot of similar JavaScript code, you can learn from.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95-96 | <HTML> <HEAD> <TITLE> Floating Layer Center dialog box Effect demo </TITLE> <meta http-equiv=content-type content= "text/ html Charset=utf-8 "> <style type=text/css> HTML {height:100%} body {height:100%} body {font-size:14px; 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) {win Dow.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)? ' <img src= ' x.gif "alt=" Cancel "class=" Nd-cancel "/> ':" "+ ' </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); if (Document.body.offsetLeft > 0) dgc.style.marginLeft =Document.body.offsetLeft + "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.removeC Hild (This.elt); } Window.neatdialog = null; function OpenDialog () {var SHTML = ' <p> What you see now is a layer window, is the </p> ' + ' <p><button onclick= ' that is ejected by JS control Window.neatDialog.close () "> Close </button></p>"; New Neatdialog (SHTML, "Do you know?) ", false); </SCRIPT> <BODY> <H1> Floating Layer Center effect </H1> <button onclick=opendialog () > Point this demo effect </button > </BODY> </HTML> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
