HTML使用layer弹出提示框

最新推荐文章于 2023-11-03 13:40:04 发布

佐倉

最新推荐文章于 2023-11-03 13:40:04 发布

阅读量780

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_38641985/article/details/118556546

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

下载layer

下载地址，https://layer.layui.com/
在这里插入图片描述
说明弹出框依赖组件

下载jquery

下载地址，https://jquery.com/download/
在这里插入图片描述
说明 jQuery 是一个 JavaScript 函数库，jQuery 库可以通过一行简单的标记被添加到网页中。

下载bootstrap

下载地址，https://getbootstrap.com/
在这里插入图片描述

说明提示框不需要依赖这个框架，它是提供了美化样式的前端控件框架。

登录提示框显示

<html>
<head> 
<title>
登录
</title>
</head>
<h3 align="center">欢迎访问</h3>
	<style  type="text/css">
		body{
		background-image:url("/content/source/static/img/login.jpg");
		background-repeat:no-repeat;
		background-size:100%;
		}
</style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="plugins/bootstrap/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
	<script src="plugins/jquery-3.3.1.min.js"></script>
	<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="plugins/layer-v3.5.1/layer/layer.js"></script>
<script>
function loginCheck()
{
	var id = document.forms["myform"]["loginId"].value;
	var pwd = document.forms["myform"]["loginPwd"].value;
	
  
	if (id == "admin" && pwd == "1234")
		{
		layer.tips('登陆成功',"#loginPwd",
				{
					tips: [2,'#0FA6D8'],
					tipsMore: false,
					time: 2000
				})
		return true;
		}
	else if(id == "" && pwd == "")
		{
		layer.tips('请输入账号密码',"#loginPwd",
				{
					tips: [2,'#0FA6D8'],
					tipsMore: false,
					time: 2000
				})
				return false;
		}
		else if(id != "" && pwd == "")
		{
		layer.tips('请输入密码',"#loginPwd",
				{
					tips: [2,'#0FA6D8'],
					tipsMore: false,
					time: 2000
				})
				return false;
		}
		else if(id == "admin" && pwd != "1234")
		{
			layer.tips('密码错误',"#loginPwd",
				{
					tips: [2,'#0FA6D8'],
					tipsMore: false,
					time: 2000
				})
				return false;
	    }
	else if(id != "admin")
		{
			layer.tips('用户名不存在',"#loginId",
			{
				tips: [2,'#0FA6D8'],
				tipsMore: false,
				time: 2000
			})
		    return false;
		}
		else
			{
			layer.tips('未知错误',"#loginId",
					{
						tips: [2,"#FF1030"],
						tipsMore: false,
						time: 2000
					})
				    return false;
			}
	
}

</script>
<body>
<div align="center">
<form   name="myform" method="post" action="/content/login" onsubmit="return loginCheck()">
<div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
账号：<input id="loginId" name="loginId" type="text" style="text-aglin: center;">
<br>
密码：<input id="loginPwd" name="loginPwd" type="text" style="text-aglin: center;">
<br>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<button type="submit" align="center">登录</button>
<br>
</div>
</form>
</body>
</html>

在这里插入图片描述

佐倉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML使用layer弹出提示框

下载layer下载地址，https://layer.layui.com/说明弹出框依赖组件下载jquery下载地址，https://jquery.com/download/说明 jQuery 是一个 JavaScript 函数库，jQuery 库可以通过一行简单的标记被添加到网页中。下载bootstrap下载地址，https://getbootstrap.com/说明提示框不需要依赖这个框架，它是提供了美化样式的前端控件框架。登录提示框显示<html><head
复制链接

扫一扫