锁定账户功能

css/okadmin.css

@@ -5,25 +5,21 @@
     font-size: 20px
 }
 
-
 /*顶部导航文字菜单样式*/
 .layui-nav {
     padding: 0
 }
 
-
 /*顶部菜单左边部分菜单样式*/
 .layui-layout-left {
     left: 235px
 }
 
-
 /*第一个tan选项卡隐藏取消图标*/
 .layui-tab-title li:first-child .layui-tab-close {
     display: none
 }
 
-
 /*隐藏/显示左边菜单按钮样式*/
 .menu-switch {
     width: 30px;
@@ -38,7 +34,6 @@
     cursor: pointer
 }
 
-
 /*主体内容样式*/
 .content-body {
     position: absolute;
@@ -50,7 +45,6 @@
     overflow: hidden
 }
 
-
 /*主体内容选项卡内容样式*/
 .content-body .layui-tab-content {
     position: absolute;
@@ -61,31 +55,44 @@
     overflow: hidden
 }
 
-
 /*使iframe高度100%,它的父类高度也需要100%*/
 .content-body .layui-tab-content .layui-tab-item {
     height: 100%
 }
 
-
 /*使iframe高度100*/
 .content-body .layui-tab-content .layui-tab-item iframe {
     height: 100%
 }
 
-
 /*响应式代码控制*/
-@media screen and (max-width:768px) {
+@media screen and (max-width: 768px) {
     .layui-layout-admin .layui-bg-black {
         left: -200px
     }
+
     .layui-layout-admin .content-body {
         left: 0
     }
+
     .layui-layout-admin .layui-footer {
         left: 0
     }
+
     .layui-layout-left {
         display: none
     }
 }
+
+/*阴影*/
+.yy {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: .5;
+    z-index: 10;
+    background-color: #000;
+    display: none;
+}

index.html

@@ -42,7 +42,7 @@
                         <dd><a href="">个人中心<span class="layui-badge-dot"></span></a></dd>
                         <dd><a href="">基本资料</a></dd>
                         <dd><a href="">安全设置</a></dd>
-						<dd><a href="">锁定账户</a></dd>
+						<dd><a href="javascript:void(0)" id="lock">锁定账户</a></dd>
                     </dl>
                 </li>
                 <li class="layui-nav-item"><a href="javascript:void(0)" id="logout">退出</a></li>
@@ -116,9 +116,10 @@
         </div>
         <!--底部信息-->
         <div class="layui-footer">
-            Copyright ©2018 ok-admin v1.0 All Rights Reserved <button class="layui-btn layui-btn-danger layui-btn-xs">捐赠作者</button>
+            Copyright ©2018-©2018 ok-admin v1.0 All Rights Reserved <button class="layui-btn layui-btn-danger layui-btn-xs">捐赠作者</button>
         </div>
     </div>
+    <div class="yy"></div>
     <!--js逻辑-->
     <script src="lib/layui/layui.js"></script>
     <script>
@@ -192,6 +193,24 @@
                     window.location = "login.html";
                 });
             });
+
+            /**
+             * 锁定账户
+             */
+            $("#lock").click(function () {
+                layer.confirm("确定要锁定账户吗？", {skin: 'layui-layer-lan', icon: 4, title:'提示', anim: 1}, function (index) {
+                    layer.close(index);
+                    $(".yy").show();
+                    layer.prompt({btn: ['确定'], title: '输入密码解锁', closeBtn: 0, formType: 1}, function (value, index, elem) {
+                        if (value == "123456") {
+                            layer.close(index);
+                            $(".yy").hide();
+                        } else {
+                            layer.msg('密码错误', {anim: 6});
+                        }
+                    });
+                });
+            });
         });
     </script>
 </body>