0

0

jquery制作居中遮罩层效果分享_jquery

php中文网

php中文网

发布时间:2016-05-16 16:58:52

|

1462人浏览过

|

来源于php中文网

原创

复制代码 代码如下:





遮罩演练






   

           

  •             ++++
           

  •    






   

       

               

  •            

  •            

  •        

   





shadow.js

复制代码 代码如下:

shadow_list=[];
function showAddTopic(cb){
    var input_container=$('#content-container-templet').clone();
    input_container.removeAttr('id');
     var shadow=$('
').addClass('shadow-wrapper').append(input_container);
     shadow.appendTo(document.body);
     shadow_list.push(shadow);
     $('.sure',shadow).on('click',function(){
         var val=$('.input-li input',shadow).val();
         cb(val);
         hideAddTopic();
     });
     $('.cancel',shadow).on('click',function(){
         hideAddTopic();
     });
}

function hideAddTopic(){
    if(shadow_list.length>0){
        var shadow=shadow_list.pop();
        shadow.remove();
    }
}

component2.css

复制代码 代码如下:

html,body{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        overflow:hidden;
    }
    ul,li{
        padding:0px;
        margin: 0px;
        list-style:none;
    }
   input,textarea{
    vertical-align:middle;
    border:none;
   }
    .layout-container{
        position:absolute;
        top:0px;
        height:100%;
        overflow:auto;
    }
   .left-container{
       left: 0px;
       width:20%;
       border:solid 5px #52BE7F;
   }
   .right-container{
       right:0px;
       width:80%;
   }
   .shadow-wrapper{
       position: absolute;
       width:100%;
       height: 100%;
   }
   .topic-title li  span{
       height:30px;
       line-height:30px;
       vertical-align:middle;
   }
   .topic-title  .fun{
       float:right;
   }
   .topic-input-div{
       position: absolute;
       left: 50%;
       top:50%;
       height:200px;
       width: 400px;
       margin-top:-120px ;
       margin-left:-210px;
       padding:20px 10px;
   }
   .topic-input-ul{
       vertical-align: middle;
       position:absolute;
       width:380px;
       height:2em;
       left: 50%;
       top:50%;
       margin-top: -1em;
       margin-left: -190px;
   }
    .topic-input-ul li{
        line-height: 2em;

        display:inline-block;
         *display:inline;
   }
   .topic-input-ul .input-li{
       width:40%;
   }
   .topic-input-ul .btn-li{
       width: 15%;
   }

相关专题

更多
虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

29

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

20

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

37

2025.12.25

word转换成ppt教程大全
word转换成ppt教程大全

本专题整合了word转换成ppt教程,阅读专题下面的文章了解更多详细操作。

6

2025.12.25

msvcp140.dll丢失相关教程
msvcp140.dll丢失相关教程

本专题整合了msvcp140.dll丢失相关解决方法,阅读专题下面的文章了解更多详细操作。

2

2025.12.25

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

6

2025.12.25

微信调黑色模式教程
微信调黑色模式教程

本专题整合了微信调黑色模式教程,阅读下面的文章了解更多详细内容。

5

2025.12.25

ps入门教程
ps入门教程

本专题整合了ps相关教程,阅读下面的文章了解更多详细内容。

4

2025.12.25

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

218

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号