DIV彈出層

時間 2019-11-20

標籤 div 彈出欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div彈出層</title>
<script type="text/javascript">
   function listdiv(){
      var side=document.getElementById("side");
	  var out=document.getElementById("out");
	    out.style.display="block";
	    side.style.display="block";
   
   }
   function  bbb(){
     var side=document.getElementById("side");
	  var out=document.getElementById("out");
	    out.style.display="none";
	    side.style.display="none";
   
   }
</script>
<style type="text/css">
<!--
   body{
     text-align:center;
	 margin:0px;
	 padding:0px;
     
	 }
#out {
     display:none;
	 position:absolute;
     top: 0%; 
	 left: 0%;
     width:100%;
	 height:100%;
     margin:0 auto;
	 z-index:1001;
	 background-color: gray;
}
#side {
    position:absolute;
	top: 25%; 
    left: 25%; 
    width: 55%; 
    height: 55%; 
    padding: 20px;
	border:4px solid red;
	border-color:#FFFF00;
	display:none;
	z-index:1002;
	opacity:.80; 
	background-color:white;
}
.kkk{
     margin-top:0px;
    display:block;
    height:20px;
	width:100px;
	border:1px solid red;
	margin-top:2px;
	margin-right:2px;
	float:right;
}
-->
</style>
</head>
<body>
<input name="button" type="button" value="打開div"  onclick="listdiv()"/>
<div id="out"></div>
  <div id="side">
    <a href="javascript:bbb()" class="kkk">關閉彈出DIV</a>
  </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。