侧边弹出div

最新推荐文章于 2023-07-06 12:59:53 发布

原创最新推荐文章于 2023-07-06 12:59:53 发布 · 672 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#弹出div

弹出div 专栏收录该内容

1 篇文章

订阅专栏

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
        <title>点击文字弹出一个DIV层窗口代码</title> 
        <style> 
        .white_content { 
            display: none; 
            position: absolute; 
            top: 25%; 
            left: 81%; 
            width: 250px; 
            height: 55%; 
            padding: 20px; 
            border: 1px solid orange; 
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 
		.d{
		    position: absolute; 
            top: 45%; 
            left: 97%; 
            width: 10px; 
            height: 10%;
			background-color: gray;
			float:right;
		}
		.b{
		    position: absolute; 
            top: 45%; 
            width: 10px;
			left: 0%; 
            height: 10%;
			background-color: gray;
			float:left;
		}
	
    </style> 
    </head> 
    <body> 

        121212
        <div id="a" class="d">
		   <p><a href = "javascript:void(0)" onmousemove="open1()">
		     指标
		   </a></p> 
		</div>

		<div id="light" class="white_content" onmouseout="close1()">	
           <div id="a" class="b">
		     <a  href = "javascript:void(0)" onclick = "close1()"> 指标</a>
		   </div>

		</div> 
        <div style="width:100%;height:100%;background-color: red;"></div>
		
    </body> 
</html>
<script>
function open1(){
 document.getElementById('light').style.display='block';
 document.getElementById('a').style.display='none'
}
function close1(){
  document.getElementById('light').style.display='none';
  document.getElementById('a').style.display='block';
}
</script>