弹窗小广告

最新推荐文章于 2024-07-12 16:27:40 发布

chongfu8271

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量145

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3772683/blog/1613633

版权

点击x，小广告盒子就隐藏起来（display：none实现）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       body{
           height: 3000px;
           background:grey;
       }
       #box{
           width: 195px;
           height: 250px;
           background: white;
           position:fixed;//相对于浏览器窗口进行定位
           right: 0;
           bottom: 0;
       }
       #pic a#closeBtn{
           display: inline-block;
background: red no-repeat -120px -19px;
text-align: center;
text-decoration: none;
top:5px;
right: 5px;
width: 16px;
height: 16px;
           position: absolute;//相对于第一个父元素进行定位
       }
       #pic a#closeBtn:hover{
           /*background-position: -100px;-19px;*/
           background:white;
       }
       .hide{
           display: none;
       }
   </style>
   <script type="text/javascript">

//function close(){ var obj=document.getElementById("closeBtn");obj.style.display="none";}
       window.οnlοad=function(){
           var tipbtn=document.getElementById("box");
           var closebtn=document.getElementById("closeBtn");
           closebtn.οnclick=function(){
               tipbtn.className="hide";
           }
       }

//对比，第一种简单
   </script>
</head>
<body>
   <div id="box">
       <div id="pic">
           <a href="http://www.baidu.com"><img src="tanchuang.png"></a>
           <a href="javascript:void(0);" id="closeBtn" >x</a>//οnclick="close()"
       </div>
   </div>
</body>
</html>

转载于:https://my.oschina.net/u/3772683/blog/1613633

chongfu8271

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹窗小广告

点击x，小广告盒子就隐藏起来（display：none实现） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documen...
复制链接

扫一扫