这种提示框是怎么实现的
这种提示框怎么实现？最好附上方法和文件名。那个图片无所谓，主要是弹出大概2秒后自动消失了。
补充：想实现如果登录成功就让他跳转到指定页面去，如果登录失败则弹出对应的账号或者密码错误等提示。以下是目前的代码，麻烦补充一下。如果需要建立JS，请问JS怎么写。
<!DOCTYPE html>
<!-- saved from url=(0036)http://43.142.44.159:8089/login.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>百旺长福用户登录</title>
<script type="text/javascript" src="Foxnic-Login_files/login.js"></script>
<!--写base标签，永远固定相对路径跳转结果-->
<base href="http://localhost:8080/houduan/">
<link )="" rel="shortcut icon" href="http://localhost:8080/houduan/favicon.ico" type="image/vnd.microsoft.icon">
<link )="" rel="icon" href="http://http://localhost:8080/houduan/theme.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="../web/assets/css/layui.css">
<link rel="stylesheet" href="../web/assets/css/login.css" media="all">
<link rel="stylesheet" href="../web/assets/css/foxnic-web.css">
<link rel="stylesheet" href="../web/assets/css/pear-support.css">
<script>var foxnic_cachekey="20221225140425";</script>
<style>
#login-panel {
width: 300px;
border-radius: 16px;
position: absolute;
background-color: #fff;
left: 100px;
top: 100px;
box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, .15);
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
padding-top: 20px;
opacity:0.0;
}
.logo {
width: 80px;
height: auto;
}
.title {
margin-top: 16px;
margin-bottom: 8px;
font-weight: 700;
font-size: 15px;
color: #444;
}
.tool-button {
width: 40px;
height: 40px;
padding: 2px;
font-size: 18px;
cursor: pointer;
background: #FFF;
text-align: center;
line-height: 40px;
margin-bottom: 0px;
border-radius: 50%;
position: absolute;
color: #acacac;
right: 24px;
bottom: 28px;
display: block;
-webkit-box-shadow: 0px 1px 20px 0px rgb(0 0 0 / 10%), inset 0px -1px 0px 0px rgb(0 0 0 / 10%);
box-shadow: 0px 1px 20px 0px rgb(0 0 0 / 10%), inset 0px -1px 0px 0px rgb(0 0 0 / 10%);
}
.lang-icon {
font-size: 24px;
}
.lang-icon:hover {
font-size: 24px;
color: #333;
}
</style>
<link id="layuicss-layer" rel="stylesheet" href="../src/assets/css/layer.css" media="all">
</head>
<body style="background-image:url(/assets/images/bg_login_2.png);background-repeat:no-repeat;background-size:cover;">
<div class="login_banner">
<div id="l_content" class="layui-form-pane" style="top: 238.8px; left: 786.5px; opacity: 1;">
<img class="logo" src="web/assets/images/foxnic.png">
<div class="title">百旺长福数据中心</div>
</div>
<div id="content">
<div class="login_box">
<div class="login_box">
<div class="msg_cont">
<b></b>
</div>
<div class="form">
<form action="registServlet" method="post">
<div class="layui-form-item">
<label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
<div class="layui-input-block">
<label>用户名称：</label>
<input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" />
</div>
</div>
<br />
<br />
<div class="layui-form-item">
<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
<div class="layui-input-block">
<label>用户密码：</label>
<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" />
</div>
</div>
<br />
<br />
<div class="layui-form-item">
<button lay-filter="login-submit" id="sub_btn" class="layui-btn layui-btn-fluid" style="background-color: #f56c6c;" lay-submit>登 录</button>
<script type="text/javascript" src="Foxnic-Login_files/login.js"></script>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../web/Foxnic-Login_files/login.js"></script>
</body>
</html>
package com.bwcf.web;
import com.bwcf.pojo.User;
import com.bwcf.service.UserService;
import com.bwcf.service.impl.UserServiceImpl;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class RegistServlet extends HttpServlet {
private UserService userService = new UserServiceImpl();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取请求的参数
String username = req.getParameter("username");
String password = req.getParameter("password");
//调用userService.login()登录处理业务
User loginUser = userService.login(new User(null, username, password, null));
//如果等于null说明登录失败
if (loginUser == null){
// 跳回登录界面
req.setAttribute("login_msg", "账户或密码不正确");
RequestDispatcher rd = req.getRequestDispatcher("index.jsp");
rd.forward(req,resp);
} else {
//登录成功
req.getRequestDispatcher("web/pages/user/Iogin.html").forward(req,resp);
}
}
}
效果参见：
http://43.142.44.159:8089/login.html#
可参考这篇：
https://blog.csdn.net/xiejunna/article/details/78034209
你那个效果链接用的是layui框架
你可以在这里模拟一下
https://www.ilayuis.com/demo/index.htm
layer.msg('提示语法', {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
//do something
});
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7632535
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^