点击按钮，登录框、登录图标的隐藏与显示的相互切换

最新推荐文章于 2023-02-02 11:28:58 发布

weixin_30532759

最新推荐文章于 2023-02-02 11:28:58 发布

阅读量487

点赞数

文章标签：爬虫游戏

原文链接：http://www.cnblogs.com/WentingC/p/8073038.html

版权

 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","width: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({width:$(window).width(),height:$(window).height(),"background-color":"pink"});
31     $("#box").append(div2);
32     div2.setAttribute("id","loginIcon");
33     div2.setAttribute("style","width: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>

转载于:https://www.cnblogs.com/WentingC/p/8073038.html

weixin_30532759

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击按钮，登录框、登录图标的隐藏与显示的相互切换

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>toggletest</title> 6 </head> 7 <style> 8 </s...
复制链接

扫一扫