jsp页面弹窗的消失

Bertha 。 2024-03-16 23:55 29阅读 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 条评论，29人围观）

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

相关阅读

相关 jsp页面弹窗的消失

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

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

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

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

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

相关 js页面弹窗

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

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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20

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

相关 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 赞/ 164 阅读

相关 JSP/HTML页面弹出框

需求：项目中要求点击某个按钮，弹出一个对话框，输入数据，提交。首先来分析一下，在A页面输入N多数据，然后点击提交按钮，弹出一个新的对话框B，对话框B里也要输入N多数据，在

怼烎@/ 2022年07月15日 14:54/ 0 赞/ 266 阅读

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

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

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

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

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

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

相关 bootstrap modal弹窗点击窗口中的按钮不消失

\[html\] [view plain][] [copy][view plain] 1. <div class="modal fade bs-example-moda

男娘i/ 2021年10月08日 07:02/ 0 赞/ 320 阅读

相关一个页面弹窗多个

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

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