在這里提供一個簡單layer遮罩層，想深入了解可以進入 layer官網 多多學習哦。
先看下HTML頁面代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layer遮罩層</title> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/csd97/H-ui.min.css" /> </head> <body> <center> <a href="javascript:;" onclick="easy()">點我</a> </center> </body> </html> <script type="text/javascript" src="__ROOT__/Public/admin/lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="__ROOT__/Public/admin/lib/layer/2.4/layer.js"></script> <script> function easy(){ var content= '<form action={:U(actInsGoods)} method="post" class="form form-horizontal" id="form-member-add">' + '<div class="row cl">' + '<label class="form-label col-xs-4 col-sm-3">名稱</label>' + '<div class="formControls col-xs-8 col-sm-9">' + '<input type="text" class="input-text" name="name">' + '</div>' + '</div>' + '<div class="row cl">' + '<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">' + '<input class="btn radius" type="submit" value="提交">' + '<input class="btn radius layui-layer-close" type="submit" value="取消">' + '</div>' + '</div>' + '</form>'; layer.open({ type: 1, area: ['400px','300px'], fix: false, //不固定 maxmin: true, shade:0.4, title: '標題', content: content }); } </script>
頁面的內容只需拼接進去就行，樣式可以自己定義，也可以參考下代碼中的示例
下面看下運行結果
layer.js 可以從 layer官網下載一份 ， layer彈出組件 中也有非常好的示例
這里的樣式借用 H-ui前端框架的，也是比較實用，強大的。
以上就是簡單的遮罩層，比較粗糙，僅供參考。