欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-28 15:06:39
jquery制作居中遮罩层效果代码如下: <...

jquery制作居中遮罩层效果代码如下:


<!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>
<p class="left-container layout-container">
    <ul class="topic-title">
        <li>
            <span class="fun">++++</span>
        </li>
    </ul>
</p>
<p class="right-container layout-container">

</p>
<p style="display:none">
    <p class="topic-input-p" 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>
    </p>
</p>
</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=$('<p />').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-p{
       position: absolute;
       left: 50%;
       top:50%;
     nbsp;  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%;
   }