Partager l'effet de la création d'un calque de masque centré avec jquery

Partager l'effet de la création d'un calque de masque centré avec jquery_jquery

WBOY

Libérer： 2016-05-16 16:58:52

original

1210 Les gens l'ont consulté

复制代码代码如下 :

遮罩演练

shadow.js

复制代码代码如下:

shadow_list=[];
function showAddTopic(cb){
    var input_container=$('#content-container-templet').clone();
    input_container.removeAttr('id');
     var shadow=$( '

').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;
        largeur : 100 %;
        hauteur : 100 %;
        débordement : caché ;
 }
    ul,li{
        padding:0px;
        margin : 0px;
        list-style:aucun;
    }
   input,textarea{
    vertical-align:middle ;
    border:none;
   }
    .layout-container{
        position:absolute;
        top:0px;
        height:100%;
        overflow:auto;
    }
   .left-container{
       gauche : 0px;
       largeur:20%;
       border:solid 5px #52BE7F;
   }
   .right-container{
> >   }
   .topic-title li  span{
       height:30px;
       line-height:30px;
       vertical-align:middle;
   }
   .topic-title  .fun {
       float:right;
   }
   .topic-input-div{
       position : absolue;
       gauche : 50 %;
       top : 50% ;
       hauteur : 200px;
       largeur : 400px;
       margin-top:-120px ;
       margin-left:-210px;
       padding:20px 10px;
   }
   .topic-input-ul {
       alignement vertical : milieu ;
       position : absolue;
       largeur : 380 px ;
       hauteur : 2em ;
       gauche : 50 % ;
       haut : 50 % ;
 margin-top : -1em;
       margin-left : -190px;
   }
    .topic-input-ul li{
        hauteur de ligne : 2em;

        display:inline -block;
         *display:inline;
   }
   .topic-input-ul .input-li{
       width:40%;
   }
   .topic-input-ul .btn-li{
       largeur : 15 % ;
   }