给层加上最大化，最小化和关闭按钮（经典代码）适合做浮动层类。

最新推荐文章于 2024-05-17 15:15:32 发布

hangkongmeng

最新推荐文章于 2024-05-17 15:15:32 发布

阅读量831

点赞数

文章标签： function div class border

本文链接：https://blog.csdn.net/hangkongmeng/article/details/1909563

版权

<head>
    <script type="text/javascript">
     function onMaxClick(){
      var oMax = arguments[0];
     oMax.style.display = "none";
     oMax.previousSibling.style.display = "inline";
     oMax.parentNode.nextSibling.style.display = "inline";
     }
     function onCloseClick(){
      arguments[0].parentNode.parentNode.style.display = 'none';
     }
     function onMinClick(){
     var oMin = arguments[0];
     oMin.style.display = "none";
     oMin.nextSibling.style.display = "inline";
     oMin.parentNode.nextSibling.style.display = "none";
     }

    </script>
</head>
<body>
    <div style="width:300px;background-color:#FDF3D5;border: orange 1px solid;">
     <div class="top" style="position: relative;height: 20px;background-color:orange">
      <span style="position: absolute; right:130;top:0"><img
        src="images/handle.gif" />
      </span>
      <span style="position: absolute; right:15;top:0;display:inline" οnclick="onMinClick(this)"><img
        src="images/min.gif" />
      </span>
      <span style="position: absolute; right:15;top:0;display:none" οnclick="onMaxClick(this)"><img
        src="images/max.gif" />
      </span>
      <span style="position: absolute; right:0;top:0" οnclick="onCloseClick(this)"><img
        src="images/close.gif" />
      </span>
     </div>
     <div class="bottom" style="height:200px;padding: 20px; color:green; font-weight:bold;">
      This is the content!
     </div>
    </div>
</body>