jquery製作居中遮罩層效果分享_jquery

複製程式碼程式碼如下：

   

       
• 
             
    class="right -container 佈局容器">
  
  

   

       

           

           
• 確定取消

       

   

shadow.js

複製程式碼

程式碼如下：shadow_list=[]]; 🎜>function showAddTopic(cb){    var input_container=$('#content-container-templet').clone();    input_container.removeAttr('id'); '

').addClass('shadow-wrapper').append(input_container);

    shadow.appendTo(document.body);

    .sure',shadow).on('click',function(){
         var val=$('.input-li input',shadow).val();
   >         hideAddTopic();
     });
     $('.cancel',shadow).on('click  });
}

function hideAddTopic(){
    if(shadow_list.length>0){
        var Shadow=shadow_list.pop();}



component2.css

複製程式碼


程式碼如下：

html,body{
        內邊距:0px;
        邊距: 0px 🠠%;高度: 100%;
        溢出:隱藏;
}
    ul,li{
        padding:0px;
       🎜>   input,textarea{
    垂直對齊:middle ;
    邊框:無;
   }
    .layout-container{
          高度:100%;
        溢位:自動;
    }
   .left-container{
       left: 0px;
    orderf5:75:20%; 🎜>   }
   .right-container{
       右:0px;
       寬度:80%;
   }
  :100%;
       高度: 100%;
   }
   .topic-title li  span{
       height:30px;
    >   }
   .topic-title .fun {
       float:right;
   }
   .topic-input-div{
       上方：50%；
高度： 200px;
       寬度: 400px;
       上邊距:-120px ;
     上邊距:-120px ;
    x 10px;
   }
   .topic-input -ul {
       垂直對位：中；
       位置：絕對；
         0%；
       上：50%；
margin-top: -1em;
       margin-left: -190px;
   }
            顯示:內聯-block;
         *顯示:內聯;
   }
   .topic-input-ul .input-li{
       寬度:40%;
   }
   .topic- input-ul .btn-li{
       寬度：15%;
   }