面板遮罩

最新推荐文章于 2024-07-22 15:13:59 发布

mafangling

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量113

点赞数

分类专栏：面板遮罩文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/mafangling/article/details/84183863

版权

面板遮罩专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>面板1</title>

    <link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css"/> 
    <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="js/ext-all.js"></script> 
    <script  type="text/javascript">

    Ext.onReady(function()
	{
         var  panel=new  Ext.Panel(
          {
            id:'panel_hello',
            title:'hellotitle',
            width:200,
            height:300,
			html: '<h1> 面板的主区域</h1>'
          });
          panel.render("hello");
    });
    function   zhezhao()
	{
		var  mydiv = document.createElement("div");
		mydiv.id="mydiv";
		mydiv.style.backgroundColor="#33393C";
		mydiv.style.height = document.body.clientHeight+"px";
		mydiv.style.width  = document.body.clientWidth+"px";
		mydiv.style.filter = "alpha(opacity=40)";
                mydiv.style.opacity = "0.40";
		mydiv.style.zIndex= "999";
		document.body.appendChild(mydiv);
	}

   </script>
     <style  type="text/css" >
          #hello{
		         width:210;
				 height:310; 
			     background-color :#FFFFFF;
				 z-index:1000;
				 border:1px solid  #ccc;
				}
     </style>
</head>
<body>


  <input type="button"   value="遮罩"  onclick="zhezhao()" />  
  <span  id="hello"> </span>     
</body>
</html>