DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery制作居中遮罩層效果分享
jquery制作居中遮罩層效果分享
編輯:JavaScript綜合知識     

 這篇文章主要介紹了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> <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%;    }  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved