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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
axios学习教程全攻略
Mar 26 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
php树型类实例
2014/12/05 PHP
网页常用特效代码整理
2006/06/23 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python实现根据文件格式分类
2019/10/31 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
总经理秘书的岗位职责
2013/12/27 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
会计求职信范文
2014/05/24 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
投诉信范文
2015/07/02 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Java 多线程并发FutureTask
2022/06/28 Java/Android