這篇文章主要介紹了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%; }