`
yzz9i
  • 浏览: 221517 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

jsp 创建 覆盖层DIV 怎么创建 【源代码】

阅读更多
自己写的一个脚本:

把下面这几个脚本和jsp代码放在你的jsp页面调用createDIV 方法就okl了


引用

<script type="text/javascript">
function createDIV(content) {
document.getElementById("DetailLayer").innerHTML = content;
var DetailLayer = document.getElementById("DetailLayer");
var webBgLayer = document.getElementById("webBgLayer");
// ShopConfirmLayer.innerHTML=str;
DetailLayer.style.display = "";//显示内容层,显示覆盖层

webBgLayer.style.display = "";
webBgLayer.style.width = document.documentElement.scrollWidth + 900 + "px"; //为覆盖层设置宽度
webBgLayer.style.height = document.documentElement.scrollHeight + 1600
+ "px"; //为覆盖层设置高度

DetailLayer.style.left = ((webBgLayer.style.width - 726) / 2) + "px";
DetailLayer.style.top = Math
.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2))
+ document.documentElement.scrollTop + "px"; //为内容层设置位置
}
</script>



<!--信息内容层-->

<div id="DetailLayer"
style="position: absolute; top: 0px; left: 100px; z-index: 900; width: 726px; display: none; background-color: white">
<img src="jslib/mytable/images/loader.gif"><!--加载时候显示图片-->
<input name="button1" value="关闭" type="button" onclick="CloseDetail()" />
</div>

<!--覆盖层-->
<div id="webBgLayer"
style="position: absolute; top: 0px; left: 0px; z-index: 899; background-color: gray; height: 100%; width: 100%; display: none; -moz-opacity: 0.9; filter: alpha(opacity =50);">
</div>


function CloseDetail() { //关闭 层
var DetailLayer = document.getElementById("DetailLayer");
var webBgLayer = document.getElementById("webBgLayer");
DetailLayer.style.display = "none";
webBgLayer.style.display = "none";

}

0
0
分享到:
评论

相关推荐

    JSP动态网页制作基础培训教程源代码.rar

    此部分是指文件夹名为第1~9章中的内容(如表1),这些是书中介绍JSP相关知识的源代码。文件的命名规则与书中相应源代码文件名一致。读者可将相关文件夹(如ch2)拷贝到Tomcat服务器安装目录的子目录webapps下,并...

    jsp服务器时间倒计时完整实例源代码

    jsp服务器时间倒计时完整实例源代码 本资源提供了一个基于JSP的服务器时间倒计时实例源代码,供初学者学习和参考。下面是对该资源的详细分析和知识点总结: 知识点1:JSP获取服务器时间 在JSP中,获取服务器时间...

    jsp+xheditor web文本编辑器源代码

    总的来说,“jsp+xheditor web文本编辑器源代码”是一个结合了服务器端编程与前端富文本编辑的实例,对于学习和实践JSP和Web开发技术,尤其是涉及到用户交互和内容管理的场景,具有很高的参考价值。开发者可以通过...

    Jsp仿淘宝网项目源代码

    **JSP仿淘宝网项目源代码详解** 该项目是一个基于JSP技术实现的电子商务平台,旨在模仿淘宝网的主要功能,包括购物、论坛以及后台管理等多个模块。这个项目充分展示了Web开发中的许多关键技术和实践,让我们逐一...

    JSP+miniUeditor Web文本编辑器源代码

    2. **HTML结构**:在JSP页面中,需要创建一个`&lt;div&gt;`元素作为编辑器的容器。例如: ```html &lt;div id="myEditor"&gt;&lt;/div&gt; ``` 3. **JavaScript初始化**:在页面的底部或者`&lt;head&gt;`部分,通过JavaScript初始化...

    简单的css+div 的jsp示例

    在IT行业中,网页开发是一项基础且重要的技能,而CSS(层叠样式表)与HTML的div元素常常被用来构建和布局网页。在这个“简单的css+div的...在myweb这个文件夹中,包含了所有相关的源代码文件,可供学习者参考和实践。

    网上书城html源代码

    在"网上书城"的源代码中,CSS文件用于定义文字样式、颜色、背景、边距、定位等视觉效果。学习CSS,你需要理解选择器的概念,如类选择器、ID选择器、元素选择器等,以及盒模型、相对定位、绝对定位等布局原理。CSS3...

    毕业设计jSP在线教学质量评价系统的设计与实现(源代码+论文).zip

    描述中提到的“源代码+论文”表明这个压缩包包含了系统开发的所有源代码和相关的毕业设计论文,这为学习者提供了完整的实践和理论参考。 在压缩包的文件名称列表中,我们可以看到多个与Java相关的类文件,这些通常...

    Dreamweaver MX 2004中文版精彩设计百例源代码

    源代码可能包含使用表格进行的传统布局,以及使用Div和CSS进行的现代流式布局,这些实例展示了如何根据屏幕尺寸自适应调整网页布局。 2. **交互性与动态效果**:Dreamweaver支持JavaScript和AJAX技术,使得网页可以...

    很实用的图片从右到左滚动的jsp代码

    4. **ProList.jsp**:根据提供的文件名,这个JSP文件可能是整个滚动效果的主页面,包含了HTML、CSS和JavaScript代码,或者它可能负责从数据库或其他数据源获取图片数据,并动态生成图片列表。 综上所述,"图片从右...

    FusionCharts示例代码(jsp)

    总之,“FusionCharts示例代码(jsp)”是一个关于如何在JSP环境下利用FusionCharts创建和管理图表的学习资源。通过理解上述知识点,开发者可以更好地掌握FusionCharts的使用,为Web应用增添生动且富有洞察力的可视化...

    java网络编程源代码

    描述中的“v512工作室”可能是这个项目或教程的作者或组织,而“html_js_css_div_src”则暗示了源代码中包含有关HTML、JavaScript、CSS和可能的网页布局(如div)的内容。HTML负责网页的结构,CSS用于样式设计,...

    jsp页面Table自动换行

    【标签】"源码"和"工具"暗示了我们可能在讨论如何查看和修改JSP源代码,以及使用特定的开发工具。源码是程序的基础,理解JSP源码有助于调试和优化表格布局问题。而“工具”可能指的是IDE(集成开发环境)如Eclipse、...

    【JavaScript源代码】ajax jquery实现页面某一个div的刷新效果.docx

    【JavaScript源代码】中的Ajax与jQuery实现页面特定Div的刷新效果是前端开发中常见的功能,主要涉及异步数据交互和DOM操作。以下是对这个技术点的详细解释: 1. **Ajax(Asynchronous JavaScript and XML)**:Ajax...

    JavaScript完全自学宝典 源代码

    1.本书1~21章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:UltraEdit12.10a、eclipse-jee-europa Web浏览器:Microsoft Internet Explorer 6.0及以上版本 ...

    简单三层新闻发布系统V1.0源码

    一个用于学习Asp.NET C#编程的简单三层架构新闻发布系统,此源码是我学习三层架构时做的一个新闻发布系统,供学习三层的朋友们参考。 源码中涉及用到的技术: C#,Sql Server2005存储过程,触发器,Div+Css,jQuery, ...

    jsp 输出 饼状图 柱状图

    然后,你可以创建一个Java类来生成饼状图或柱状图的模型,再通过JSP将这个模型转换为图像输出。例如,创建饼状图时,你需要定义各个扇区的值和标签,然后使用`JFreeChart`的`createPieChart()`方法生成图表,最后...

    精选JSP可运行模板(可在tomcat上运行)

    1. **编译阶段**: 当服务器接收到JSP页面请求时,会将其转换为一个Servlet源代码文件。这个过程称为JSP翻译。转换后的源代码通常包含一个`service()`方法,其中包含了JSP页面中的所有HTML和Java代码。 2. **编译和...

    JSP实现进度条

    在压缩包中的"进度条"文件可能是实现这一功能的源代码,包括JSP文件、CSS文件、JavaScript文件等。通过分析这些文件,我们可以深入理解这个特定进度条的实现细节。 总的来说,JSP实现的登录进度条是一种结合了前端...

    easy ui datagrid项目完整源代码

    《jQuery Easy UI Datagrid 完整项目源代码详解》 jQuery Easy UI 是一款基于 jQuery 的前端框架,它提供了一系列的组件,使得开发者可以快速构建出美观且功能丰富的 Web 应用程序。其中,Datagrid 是 Easy UI 的...

Global site tag (gtag.js) - Google Analytics