1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>toggletest</title> 6 </head> 7 <style> 8 </style> 9 <script src="lib/jquery-3.2.1/jquery-3.2.1.js"></script> 10 <body> 11 <div id="box"> 12 <div id='loginBox'></div> 13 </div> 14 </body> 15 <script> 16 //登录框 17 var loginBox = document.getElementById("loginBox"); 18 loginBox.setAttribute("style","400px;height:200px;background-color:red;position:relative;left:38%;top:20%;"); 19 var div = document.createElement("div"); 20 div.setAttribute("id","closeBtnBox"); 21 div.setAttribute("style","position:absolute;top:0;right:0;"); 22 loginBox.appendChild(div); 23 //关闭按钮 24 var img = document.createElement("img"); 25 img.setAttribute("id","closeBtn"); 26 img.setAttribute("src","closebtn.png"); 27 div.appendChild(img); 28 //登录图标 29 var div2 = document.createElement("div"); 30 $("#box").css({$(window).width(),height:$(window).height(),"background-color":"pink"}); 31 $("#box").append(div2); 32 div2.setAttribute("id","loginIcon"); 33 div2.setAttribute("style","50px;height:50px;background-color:green;display:none"); 34 35 //点击关闭按钮隐藏登录框,显示登录图标;或者点击登录图标隐藏自身同时显示登录框 36 $("#closeBtn,#loginIcon").click(function(){ 37 $("#loginBox,#loginIcon").fadeToggle(); 38 }); 39 40 </script> 41 </html>