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


Posted in Javascript onFebruary 21, 2014
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>遮罩演练</title>
<link href="../css/component2.css" rel="Stylesheet"/>
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/shadow.js"></script>
</head>
<body>
<div class="left-container layout-container">
    <ul class="topic-title">
        <li>
            <span class="fun">++++</span>
        </li>
    </ul>
</div>
<div class="right-container layout-container"></div>
<div style="display:none">
    <div class="topic-input-div" id="content-container-templet">
        <ul  class="topic-input-ul">
            <li class="input-li"><input type="text" style="width: 100%;line-height: 2em"  placeholder="请输入标题"/></li>
            <li class="btn-li"><button class="sure">确定</button></li>
            <li class="btn-li"><button class="cancel">取消</button></li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $('.fun').on('click',function(){
            console.log('fun click');
            showAddTopic(function(val){
                console.log(val);
            });
        });
    });
</script>
</html>

shadow.js

shadow_list=[];
function showAddTopic(cb){
    var input_container=$('#content-container-templet').clone();
    input_container.removeAttr('id');
     var shadow=$('<div />').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%;
   }
Javascript 相关文章推荐
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
详解vue中移动端自适应方案
May 05 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
JS实现简易留言板特效
Dec 23 Javascript
js实现坦克大战游戏
Feb 24 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 Javascript
jquery遍历checkbox介绍
Feb 21 #Javascript
jquery遍历checkbox的注意事项说明
Feb 21 #Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 #Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 #Javascript
jquery五角星评分插件示例分享
Feb 21 #Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 #Javascript
jquery自定义滚动条插件示例分享
Feb 21 #Javascript
You might like
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python 处理数据的实例详解
2017/08/10 Python
python try 异常处理(史上最全)
2019/03/07 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
web页面录屏实现
2019/02/12 HTML / CSS
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
销售人员自我评价怎么写
2013/09/19 职场文书
高一英语教学反思
2014/01/22 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
师德承诺书
2015/01/20 职场文书
小平您好观后感
2015/06/09 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
《草船借箭》教学反思
2016/02/23 职场文书