`
accpxudajian
  • 浏览: 452477 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css实现shadow窗口

 
阅读更多

 

/*关键点：
 1 半透明的兼容写法：opacity:0.5,filter:alpha(opacity:50);
 2 z-index:要想z-index起作用必须给dom元素添加position:absolute;
 3 窗口遮挡效果的实现：shadow的div添加：display="display" 不是disabled */


 


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>shadow窗口</title>
<style>
	.shadow{
		opacity:0.5 !important;/*关键*/
		padding:0px;
		margin:0px;
		position:absolute;/*关键*/
		top:0px;
		left:0px;
		z-index:100;/*关键*/
		width:100%;
		height:100%;
		background:gray;/*关键*/
		filter:alpha(opacity:50);/*关键*/
	}
</style>
</head>

<body style="border:1px solid red;padding:0px;margin:0px;">
<div class="shadow" readonly="readonly"></div>
<input type="button" value="alert('aaaaaaaaaaa')" onclick="alert('aaaaaaaaaaa')">
<div style="z-index:20000;position:absolute;top:20%;left:30%;">
<input type="button" value="alert('bbbbbbbbbbbbbb')" onclick="alert('bbbbbbbbbbbbbb')">
</div>
</body>
</html>


  
  

    
      
        
      
    
      
        
    
          
    • 
          
          
  • 大小: 9.6 KB
    • 
        

      
    
    
      
    
  




  

    
    
分享到：
      
      
    

  


  

    

      
      |
      js杂记
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
    
        
        
    
          
    
            
            
    
              
                
                
                
    
                  
    
                    
                      common.css
                    
                  
    
                  
    css样式，项目中用到的，记录在此  页面设计遇到的一些问题：    1、div悬浮感、div浮动（变成行内块）、清除浮动  样式：    box-shadow: 2px 2px 5px #bbb;     float: left;    clear: both;    2、外边距自动...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      easyui属性
                    
                  
    
                  
    easyUI属性汇总 找了个时间看了下EasyUI插件，对它的插件感觉是很舒服，特地把Easy UI的大部分功能属性做了一下汇总。... 2)shadow:是否显示窗口阴影。true[显示] false[不显示]   2、div easyui-panel 生成一个面板。
    
                
    
                
              
                
                
                
    
                  
    
                    
                      css-animated-material-design
                    
                  
    
                  
    CSS动画材料设计........title&gt; repl.it &lt;/ title&gt; [removed] &lt;/ script&gt; ..... css ........ 宽度：140像素；... -webkit-animation：窗口无限前进4s； 动画：窗口无限前进4s... box-shadow：0 2px 4px rgba（1
    
                
    
                
              
                
                
                
    
                  
    
                    
                      easyUI 事件列表
                    
                  
    
                  
     2)shadow:是否显示窗口阴影。true[显示] false[不显示]  2、div easyui-panel 生成一个面板。  属性如下:  1)title:该标题文本显示在面板头部。  2)iconCls:在面板上通过一个CSS类显示16x16图标。  3)width:设置...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      dreamweaver的各种组件
                    
                  
    
                  
    History Go 2.0 这个Behavior的作用是在网页中增加一个“History Go”的javascri pt，从而可以实现类似于浏览器中的“前进”和“后退”按钮的功能。  Print 3.0 在网页中加入一个打印目标页面的功能，能够呼出打印...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      javascript-mini-projects:wesbos Javascript30项目的源代码-java project source code
                    
                  
    
                  
    以下是每个项目教给您的内容：  鼓组：事件监听器，css，数据属性，audioHTML。  CSS-Clock ：css旋转，暂时关闭过渡，js中的Date... mouse-text-shadow ：es6解构，HTMLelement.offsetWidth / left / top，mousemove
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Jquery插件 easyUI属性汇总
                    
                  
    
                  
    此属性列表请对照jQuery EasyUI 1.0.5，关于它的更多资讯请猛击这里。...true[是] false[否] 2)shadow:是否显示窗口阴影。true[显示] false[不显示]2、div easyui-panel 生成一个面板。 属性如下: 1)title:
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Ext Js权威指南(.zip.001
                    
                  
    
                  
    8.3.1　为元素添加阴影：ext.shadow与ext.shadowpool / 418 8.3.2　为组件提供阴影和shim功能：ext.layer / 419 8.3.3　让组件实现浮动功能：ext.util.floating / 420 8.3.4　记录组件状态：ext.state.stateful / ...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Bootstrap前端框架 4.5.3
                    
                  
    
                  
    ＃31693:使用自定义控件阴影变量代替通用的input-focus-box-shadow；＃31793:向后移植一些v5更改(改进了Reboot的样式，打印时自定义表单字段的样式以及对.text-break的改进)；＃29714:打印时保留自定义检查，广播和...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      选择器：:artist_palette:扁平，简单，多主题，响应Swift且易于破解的Color-Picker库。 没有依赖关系，没有jQuery。 与所有CSS框架兼容，例如Bootstrap，Materialize。 支持alpha通道，rgba，hsla，hsva等！
                    
                  
    
                  
    扁平，简单，易于破解的颜色选择器。产品特点主题使用简单零依赖多种颜色表示颜色比较不透明度控制细节调整通过。... 我个人建议使用您正在使用的框架将这些与UI相关的“窗口小部件”直接构建到应用程序中，这会花
    
                
    
                
              
            
    
          
    
        
    
    

  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics