该文章用于记录 输入密码访问页面 的实现,效果图如下:
这里用的是layui的弹出层组件 layer 中的 prompt 事件,layui可以去官网下载,然后放到自己的项目里面。
下面是代码:
demo.html ( 当前页面 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入密码访问页面</title>
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 引入 layui.js -->
<script src="layui/layui.js"></script>
<style>
h2{
width: 300px;
height: 200px;
background-color: lightblue;
text-align: center;
line-height: 200px;
margin: 0 auto;
cursor: pointer;
}
</style>
</head>
<body>
<div class="curpage">
<h2 lay-on="prompt">我是当前页面</h2>
</div>
</body>
<script>
layui.use(function () {
var layer = layui.layer;
var util = layui.util;
// 批量事件
util.on('lay-on', {
prompt: function () {
layer.prompt({ title: '请输入查看密码', formType: 1 }, function (pass, index) {
layer.close(index, function () {
console.log(pass, '======');
if (pass != '2023') {
alert('密码不正确!')
} else {
location.href = './index.html'
}
});
});
},
});
});
</script>
</html>
index.html ( 跳转后的页面 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入密码访问页面</title>
<style>
h2{
width: 300px;
height: 200px;
background-color: lightblue;
text-align: center;
line-height: 200px;
margin: 0 auto;
cursor: pointer;
}
</style>
</head>
<body>
<div class="cswitchpage">
<h2>我是跳转后的页面</h2>
</div>
</body>
</html>
好了,今天的分享就到这里了,觉得有帮助的可以点个赞,有什么问题,欢迎大家评论区探讨!
注:转载请注明出处。