栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码

复制代码 代码如下:


网页特效-窗口特效-弹出窗口后网页背景变暗的效果



.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}
.white_content{display:none;position:absolute;top:25%;left:25%;width:50%;height:50%;padding:16px;border:3px solid orange;background-color:white;z-index:1002;overflow:auto;}





点击这里打开窗口


Close

窗口内容

123



例二:
复制代码 代码如下:



无标题页
   



 
   
   
     
   
 
   





例三:
复制代码 代码如下:

    
    
    
     点击弹出层效果
    
     * {margin:0;}
     body {font-size:12px;}
     #container div{margin-top:5px;}
     #select_city h3{float:left;}
     #main_city,#all_province {clear:both;}
     #main_city div,#all_province div{width:600px;clear:left;}
     #main_city h4,#all_province h4{float:left;display:inline;font-size:16px;}
     #main_city div span,#all_province div span{margin:0 10px;cursor:pointer;font-size:12px;}
     #float_lay{width:200px;height:120px;border:1px #d1d1d1 solid;position:absolute;background:#fff;z-index:999;display:none;}
    
    
    
    
    
    
    
    
    
     风格设置  
     关闭
    
     此处显示内容
    
    
    

    

    

    
    
    
    
    
     设置提示  
     关闭
    
    
    

此处显示提示内容"
    

提示1
    

提示2
    
    
    
    

     1

    

    
    
    
    
    
     风格演示  
     关闭
    
     此处显示内容
    
    
    
    

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/108251.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号