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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 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获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
js实现轮播图特效
2020/05/28 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
使用Python生成url短链接的方法
2015/05/04 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python读取Excel实例详解
2018/08/17 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
主要的Ajax框架都有什么
2013/11/14 面试题
高三励志标语
2014/06/05 职场文书
消防安全宣传标语
2014/06/07 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
护士个人总结范文
2015/02/13 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
Python中可变和不可变对象的深入讲解
2021/08/02 Python
拙作再改《我的收音机情缘》
2022/04/05 无线电
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL