<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="css/public.css"/> <link rel="stylesheet" href="css/1.css"/> <title></title> </head> <body> <div class="add_deploy">点击</div> <div class="layer_bg"></div> <div class="layer_con"> <h5 class="tc">配置</h5> <div class="layer_main">222</div> <div class="close">x</div> </div> </body> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/1.js"></script> </html>
/*公共样式--开始*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin:; padding:; } * { box-sizing: border-box; } html, body { min-height: 100%; } body { font-family: "Microsoft YaHei"; font-size: 14px; color: #333; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ul, li { list-style: none; } img { border: none; vertical-align: middle; } a { text-decoration: none; color: #232323; } table { border-collapse: collapse; table-layout: fixed; } input, textarea { outline: none; border: none; } textarea { resize: none; overflow: auto; } .clearfix { zoom:; } .clearfix:after { content: "."; width:; height:; visibility: hidden; display: block; clear: both; overflow: hidden; } .fl { float: left } .fr { float: right } .tl { text-align: left; } .tc { text-align: center } .tr { text-align: right; } .ellipse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inline { display: inline-block; *display: inline; *zoom:; } .blue { color: #208adb; } .red { color: red; } .green { color: green; } /*公共样式--结束*/
.layer_bg { display: none; width: 100%; z-index:; position: fixed; background-color: #000; opacity: 0.3; top:; height:100%; filter: alpha(opacity=30); } .layer_con { display: none; width: 560px; padding-bottom: 20px; background-color: #fff; z-index:; position: fixed; left: 50%; top: 50%; margin-left: -280px; opacity:; filter: alpha(opacity=100); } .close { font-size: 40px; background-color: #c43737; width: 50px; height: 50px; line-height: 44px; text-align: center; color: #fff; padding:; margin:; position: absolute; right: -50px; top:; cursor: pointer; } .layer_con h5 { width: 510px; height: 68px; line-height: 68px; margin: 0 auto; font-size: 24px; color: #208adb; border-bottom: 1px solid #208adb; font-weight: normal; } .layer_main { padding-top: 46px; overflow-y: auto }
$(function() { /*删除--弹框--开始*/ $(".add_deploy").on("click",function(){ layer($(this)); }); function layer(small){ var $con=$(".layer_con").height(); $(".layer_bg").css({"display":"block"}); $(".layer_con").css({"display":"block","margin-top":-$con/2}); } $(".close,.layer_cancel").on("click",function(){ $(this).parents(".layer_con").css("display","none"); $(".layer_bg").css("display","none"); }); /*删除--弹框--结束*/ });