JSP 页面实现 JS 消息弹窗效果 - 完整教程

在 JSP 页面中实现 JS 消息弹窗效果，可以通过以下步骤：

1. 在 JSP 页面中引入 jQuery 库和自定义的 JS 文件：

<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='your_custom_js_file.js'></script>

2. 在自定义的 JS 文件中，编写弹窗效果的相关代码：

function showMessage(message) {
  // 创建一个 div 元素，用于显示消息
  var messageDiv = $('<div>');
  messageDiv.text(message);

  // 设置样式
  messageDiv.css({
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    padding: '10px',
    background: '#fff',
    border: '1px solid #000',
    borderRadius: '5px',
    zIndex: '9999'
  });

  // 将 div 添加到页面中
  $('body').append(messageDiv);

  // 3 秒后自动隐藏消息
  setTimeout(function() {
    messageDiv.remove();
  }, 3000);
}

3. 在需要弹窗的地方调用 showMessage 函数，传入要显示的消息：

<button onclick='showMessage('Hello, world!')'>显示消息</button>

通过以上步骤，就可以在 JSP 页面中实现 JS 的消息弹窗效果。当点击按钮时，会显示一个带有指定消息的弹窗，3 秒后自动隐藏。你可以根据需要修改弹窗的样式和显示时间。