jsp页面弹窗的消失

最新推荐文章于 2023-06-28 09:29:35 发布
原创 最新推荐文章于 2023-06-28 09:29:35 发布 · 533 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #数学建模 #开发语言

以下是用 JSP 实现该功能的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>弹窗示例</title>
    <style type="text/css">
        /* 弹窗样式 */
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            z-index: 9999;
        }
    </style>
</head>
<body>

    <!-- 页面内容 -->
    <h1>Hello World!</h1>

    <!-- 弹窗内容 -->
    <div id="popup" class="popup" style="display:none;">
        <p>这是一个弹窗。</p>
        <button οnclick="hidePopup()">确定</button>
    </div>

    <script type="text/javascript">
        // 显示弹窗
        window.onload = function() {
            document.getElementById("popup").style.display = "block";
        };

        // 隐藏弹窗
        function hidePopup() {
            document.getElementById("popup").style.display = "none";
        }
    </script>

</body>
</html>

代码中，我们首先定义了一个名为 popup 的样式，将其设置成固定定位，并使其居中于页面。接着在页面中添加了一个 div 元素，作为弹窗内容的容器，并将其初始状态设为不可见。

在页面加载完毕后，通过 JavaScript 脚本将弹窗的 display 属性设置为 block，即可让其显示出来。点击弹窗中的确定按钮后，通过调用 hidePopup() 函数将弹窗隐藏。

你可以根据自己的需求修改这段代码，并根据需要将其嵌入到 JSP 页面中。

wangzhewln
关注
一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法
wxx5458的博客
03-31 898
一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法 第一种方法–向body动态写入div标签调用css效果显示： (新建***.jsp放在WebContent根目录下直接访问ip:端口\项目名\ **…jsp) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <hea
javascript注册表单与验证，然后弹出错误信息，3秒后自动消失
cdcdhj的博客
09-24 385
/另外一种是事件委托，来验证各input项。
jsp实现跳转页面和弹窗
wangzhewln的博客
06-28 4316
时，将会显示一个标题为 "Welcome to Page 1!" 的页面，并有一个按钮 "Go to Popup"。当用户点击该按钮时，将会跳转到。将以上两个文件保存，并确保将它们放置在你的服务器环境可以访问到的位置。页面，并显示一个弹窗 "This is a popup!，添加以下内容来显示弹窗。
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
10-23
主要介绍了JS实现弹出浮动窗口,可支持鼠标拖动和关闭的功能,界面美观大方,涉及javascript动态创建对话框的相关技巧,需要的朋友可以参考下
弹出层并屏蔽父窗口(防刷新、后退、关闭窗口)
博客
08-26 1323
    document.onmouseover=function(){     if(event.srcElement.id != "tijiao"){  window.onbeforeunload = function(){      return "如果您离开本页面，那么您本次的操作将视为无效！";  }     }     else{  window.onbeforeunload = nu
java-从支持bean中关闭JSP弹出窗口？
weixin_44109689的博客
11-04 190
当前,我在jsp中有一个commandButton元素,声明如下： <h:commandButton id="saveButton" value="Save" type="submit" action="#{backingbean.save}" onclick="window.close();" /> 单击此按钮后,将调用backing bean方法,并关闭弹出窗口...
JSP界面设置提示浮动框
weixin_34392843的博客
03-28 1937
http://www.cnblogs.com/lujiulong/p/6438719.html
实现轻量级的HTML/JSP弹窗提示效果
JSP页面在服务器上执行并返回标准的HTML代码给客户端浏览器。通过JSP，我们可以更简单地在服务器端进行逻辑处理，并将结果嵌入到HTML中动态生成页面。 当与HTML结合使用时，JSP可以用来处理业务逻辑，如数据的存取...
JS实现IE浏览器最小化在桌面右下角弹窗显示
05-26
当用户将IE浏览器最小化时，窗口并不会完全消失，而是缩放在任务栏上。要实现在桌面右下角弹出通知，我们需要利用Windows API，这是Windows操作系统提供的接口，允许应用程序与操作系统进行交互。然而，由于...
JavaScript 点击页面上的按纽，弹出层，背景变灰
12-03
在JavaScript中实现“点击按钮弹出层并使...在实际应用中，可能还需要考虑浏览器兼容性、用户体验优化等问题，例如添加动画效果、防止弹出层被页面元素遮挡等。在不断学习和实践中，你可以掌握更复杂的交互设计技巧。
一个Jsp弹出窗口
12-07
一个用于页面弹出提示的弹出窗口，简单美观易用
js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
weixin_60886885的博客
03-30 3218
js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
js案例---弹出div窗口
forever_zc的博客
12-01 2938
js简单案例
【JavaScript】简单实现弹出窗口div
热门推荐
Lee的博客
12-08 2万+
JavaScript实现弹出窗口 思路 总体使用两个div，一个作为底层展示，一个做为弹出窗口； 两个窗口独立进行CSS设计，通过display属性进行设置现实与隐藏，此处建议使用display属性而不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，影响布局； 在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭弹窗。 一、设置两个div <html> <title>弹出窗口</t
Div弹框
深水鱼儿
08-31 1082
在编写页面的时候，我们有时只是需要一个弹出框而不许要重新写一个页面的时候可以利用div弹框轻松应对。 jsp 代码：显示和隐藏弹出框 js 代码： // 打开弹出对话框1 var dlgType1 = 1; var dlg1 = null; function showPDC1(){ if(dlg1){ dlg1.show();
jsp弹出div层，并且带遮罩
晓缔的专栏
02-14 667
代码可以直接拿去运行。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>弹出一个DIV层窗口代码</title> <style> .bla...
怎样在jsp页面显示消息提示框
Jason_BourneBR的博客
09-26 7489
怎样在页面显示一个消息提示框！相信你会用到的 ，复制粘贴html直接使用！ #winpop { width:350px; height:0px; position:absolute; right:0; bottom:0; border:1px solid grey; margin:0; padding:0px; overflow:
在JSP窗口中弹出窗口,且两个窗口之间能互相传递参数
x1043556915的博客
09-29 567
【代码】在JSP窗口中弹出窗口,且两个窗口之间能互相传递参数。
1-3 jsp页面跳转时弹出小窗口的方法
weixin_45328579的博客
03-22 1万+
用java写jsp网页时，想实现携带信息跳转页面。以弹出提示框的形式，通知用户一些信息，如“密码错误，请重新登录”等信息，点击确认后跳转到指定页面。 1.在处理请求的java后台，往request里设置一个键值对形式的属性，这里是mess---密码错误，请重新登录，一次请求的范围就是一个request作用域。这样就把信息携带成功，再跳转到指定的登录页面。 request.setAttribute("mess","密码错误,请重新登录"); request.getRequestDispatcher("r
jsp获取当前页面弹窗列表数据
最新发布
08-23
在 JSP 页面中获取当前页面弹窗中的列表数据，通常需要结合前端 JavaScript 与后端 JSP 的数据交互机制。弹窗中的列表数据可以来源于后端传递的请求属性、会话属性，也可以通过异步请求（如 AJAX）从后端获取。以下是几种实现方式： ### 1. 通过 JSP 表达式获取后端传递的列表数据 如果列表数据是从后端通过 `request.setAttribute()` 传递到 JSP 页面，可以使用 JSP 表达式 `<%= %>` 或 EL 表达式 `${}` 将数据注入到 JavaScript 中，再通过 DOM 操作显示在弹窗中。 ```jsp <% List<String> dataList = (List<String>) request.getAttribute("dataList"); %> <script type="text/javascript"> var dataList = [ <% for (String item : dataList) { %> "<%= item %>", <% } %> ]; // 弹窗显示列表数据 function showPopup() { var popupContent = ""; for (var i = 0; i < dataList.length; i++) { popupContent += dataList[i] + "\n"; } alert("列表数据：\n" + popupContent); } </script> <button onclick="showPopup()">显示弹窗数据</button> ``` ### 2. 通过 AJAX 异步加载弹窗中的列表数据 如果数据量较大或需要动态加载，可以通过 AJAX 请求从后端获取 JSON 数据，并在回调函数中渲染弹窗内容。 ```jsp <script type="text/javascript"> function fetchPopupData() { var xhr = new XMLHttpRequest(); xhr.open("GET", "getData.jsp", true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var dataList = JSON.parse(xhr.responseText); var popupContent = ""; for (var i = 0; i < dataList.length; i++) { popupContent += dataList[i] + "\n"; } alert("AJAX 获取的列表数据：\n" + popupContent); } }; xhr.send(); } </script> <button onclick="fetchPopupData()">通过 AJAX 获取弹窗数据</button> ``` ### 3. 使用 EL 表达式简化数据传递 若使用 JSTL 或 EL 表达式，可以更简洁地将后端数据传递给 JavaScript： ```jsp <script type="text/javascript"> var dataList = ${dataList}; // 假设 dataList 是 requestScope 中的 List<String> function showPopupEL() { var popupContent = dataList.join("\n"); alert("EL 表达式获取的列表数据：\n" + popupContent); } </script> <button onclick="showPopupEL()">显示 EL 表达式弹窗数据</button> ``` ### 4. 动态路径引用资源（如 JS、CSS） 为了确保资源路径的正确性，尤其是在嵌套目录结构中，建议使用动态路径获取方式： ```jsp <script src="${pageContext.request.contextPath}/js/popup.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/popup.css"> ``` 这种方式可以避免因路径错误导致资源加载失败的问题[^3]。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值