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 相关文章推荐
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
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 URL跳转代码 减少外链
2011/06/25 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JSONP之我见
2015/03/24 Javascript
js实现图片轮播效果
2015/12/19 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python输出带颜色字体实例方法
2019/09/01 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
写给老师的表扬信
2014/01/21 职场文书
初三政治教学反思
2014/01/30 职场文书
旅游文化节策划方案
2014/06/06 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
你真的会用Mysql的explain吗
2022/03/31 MySQL