Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;}#login{Z-index:9999;Height:200px;width:300px;background:#ccc;Padding-top:30px;Box-shadow:0 0 20px Rgba (0,0,0, 0.2);Border-radius:5px;position:Absolute; /*top:225px; left:500px;*/}#login P{margin:10px Auto;width:250px; }#login p:nth-child (1){Margin-top:50px; }#close{position:Absolute;Top:10px; Right:10px;cursor:Pointer;}#loading-mask{position:Absolute;Top:0; Left:0; /*width:100%; height:1030px;*/background:Rgba (0,0,0, 0.4);} </style> <Scripttype= ' Text/javascript 'src= ' Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js '></Script> <Script> $(function(){ $('#open'). Click (function(){ //Mask Layer varMask= $('<div id= "Loading-mask" ></div>'); Mask.css ('width', $('Body'). width ()); Mask.css ('Height', $('Body'). Height ()); $('Body'). Append (mask); //pop -up window varOlogin= $('<div id= "Login" ><p> user name: <input type= "text" ></p><p> secret Code: <input type= " Text "></p><div id=" close ">X</div></div>'); $('Body'). Append (Ologin); //set the display position of the pop-up windowOlogin.css (' Left', ($ (window). Width ()-ologin.width ())/2);Ologin.css ('Top', ($ (window). Height ()-ologin.height ())/2); //when the browser window or scroll bar changes$ (window). On ('Resize Scroll', function() {ologin.css (' Left', ($ (window). Width ()-ologin.width ())/2);Ologin.css ('Top', ($ (window). Height ()-ologin.height ())/2 + $ (window). scrolltop ()); }); //To remove masks and pop -up windows $('#close'). Click (function() {mask.remove (); Ologin.remove (); }); }); }); </Script></Head><Bodystyle= "height:1000px;"><!--<div id= "Loading-mask" ></div> -<inputtype= "button"value= "pop-up Window"ID= "Open"> <!--<div id= "Login" > <p> user name: <input type= "text" ></p> <p> secret code: <input type= "t Ext "></p> <div id=" Close ">X</div></div> -</Body></HTML>
jquery's writing pop-up window
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
