jquery_jquery를 사용하여 중앙 마스크 레이어 생성 효과 공유

复主代码 代码如下:

   

       
• 
             
         

   

   

       
           

           

确定< ;/li>
           

取消

       
   

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){
        varshadow=shadow_list.pop();
       shadow.remove();
    }
}

comComponent2.css

复代码 代码如下:

html,body{
        패딩:0px;
        여백: 0px;
        너비: 100%;
        높이: 100%;
        오버플로: 숨김;
}
    ul,li{
        패딩:0px;
        여백: 0px;
        list-style:none;
    }
   입력, 텍스트 영역{
    수직 정렬:중간 ;
    테두리:없음;
   }
    .layout-container{
        위치:절대;
        상단:0px;
        높이:100%;
        오버플로:자동;
    }
   .left-container{
       왼쪽: 0px;
       width:20%;
       border:solid 5px #52BE7F;
   }
   .right-container{
       오른쪽:0px;
       너비:80%;
   }
   .shadow-wrapper{
       위치: 절대;
       너비:100%;
       높이: 100%;
   }
   .topic-title li  범위{
       높이:30px;
       line-height:30px;
       수직 정렬: 중간;
   }
   .topic-title  .fun {
       float:right;
   }
   .topic-input-div{
       위치: 절대;
       왼쪽: 50%;
       위쪽:50%;
       높이: 200px;
       너비: 400px;
       margin-top:-120px ;
       margin-left:-210px;
       패딩: 20px 10px;
   }
   .topic-input-ul {
       수직 정렬: 중간;
       위치:절대;
       너비:380px;
       높이:2em;
       왼쪽: 50%;
       위쪽:50%;
margin-top: -1em;
       margin-left: -190px;
   }
    .topic-input-ul li{
        line-height: 2em;

        디스플레이:인라인 -block;
         *display:inline;
   }
   .topic-input-ul .input-li{
       width:40%;
   }
   .topic-input-ul .btn-li{
       너비: 15%;
   }

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.