jsp页面弹窗的消失

Bertha 。 2024-03-16 23:55 121阅读 0赞

以下是用 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 页面中。

发表评论取消回复

表情：

评论列表（有 0 条评论，121人围观）

还没有评论，来说两句吧...

相关阅读

相关 jsp实现跳转页面和弹窗

以下是详细的步骤来使用 JSP 实现页面跳转和弹窗的示例： 1. 创建两个 JSP 文件：`page1.jsp` 和 `popup.jsp`。 2. 打开 `page1.

我不是女神ヾ/ 2024年03月17日 11:49/ 0 赞/ 69 阅读

相关 jsp页面弹窗的消失

以下是用 JSP 实现该功能的示例代码： <!DOCTYPE html> <html> <head> <title>弹窗示例</title> <style t

Bertha 。/ 2024年03月16日 23:55/ 0 赞/ 122 阅读

相关 UI自动化测试：会消失的弹窗（Toast）如何定位？

![ff90462fd25d486c905cae2406726302.png][] 看到标题可能有的小伙伴们懵了，什么是Toast，其实Toast大家都见过，就是一般在我们页

怼烎@/ 2023年10月15日 13:59/ 0 赞/ 58 阅读

相关 jquery 鼠标点击其他地方弹窗消失

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] JS代码： //判断:当前元素是否是被筛选元素

忘是亡心i/ 2022年10月02日 01:55/ 0 赞/ 234 阅读

相关 js页面弹窗

1、html元素 <div id="light" class="white_content"> <div id="lightHeader"><spa

刺骨的言语ヽ痛彻心扉/ 2022年09月26日 04:58/ 0 赞/ 244 阅读

相关 vue 弹窗如何嵌入其它页面

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20

落日映苍穹つ/ 2022年09月13日 04:27/ 0 赞/ 355 阅读

相关 jsp页面div浮动弹出

1、jsp页面设置 ![Image 1][] ![Image 1][]![Center][] 2、css设置 ![Image 1][] ![Image 1

Love The Way You Lie/ 2022年07月24日 10:05/ 0 赞/ 229 阅读

相关 layui弹窗 iframe子页面弹窗如何覆盖父级页面

使用iframe进行嵌套页面，需求要在iframe内点击按钮，出现弹窗，但是实现中发现这个弹窗只覆盖了子页面，父页面内容仍可点击。要实现覆盖整个页面，这里就需要用到layu

末蓝、/ 2022年04月18日 06:14/ 0 赞/ 317 阅读

相关跟混乱的页面弹窗说再见

对于一些快速迭代的产品来说，特别是移动端 `C`端产品，基于用户运营的目的，在 `app`首页给用户展示各种各样的弹窗是很常见的事情，在产品初期，由于迭代版本和运营策略变化地还

喜欢ヅ旅行/ 2022年01月19日 01:21/ 0 赞/ 261 阅读

相关一个页面弹窗多个

注：按钮里添加的样式 data-toggle="modal" data-target=".bs-example-modal-sm1" 注：弹出窗的

矫情吗；*/ 2021年10月08日 05:52/ 0 赞/ 500 阅读