<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹出层样例</title>
<style type="text/css">
#rc1{
background-color:#c3d9ff;
text-align:center;
width:300px
}
.w{
overflow:hidden;
background:#fff
}
.l{
float:left
}
.r{
float:right
}
.c{
clear:both
}
.t{
width:4px;height:1px
}
.o{
width:2px;height:1px
}
.p{
width:1px;height:2px
}
.d{
padding:2px 10px 5px 10px
}
#rc1#rd2{
float:right;
margin-top:5px;
text-align:center;
line-height:18px;
height: 20px
}
</style>
<script type="text/javascript">
//触发函数
function showDyncDiv(obj){
var dync = obj.getAttribute("dync");
//根据弹出层的ID获取DIV对象
var showdiv = document.getElementById("showdiv");
if(showdiv != null){
//如果body中已经存在弹出层DIV块，则先删除
document.getElementsByTagName("body")[0].removeChild(showdiv);
setShowContent(dync);
}else{
setShowContent(dync);
}
setPosition();
}
//设定弹出层显示的内容
function setShowContent(content){
var divBlock = document.createElement("div");
divBlock.setAttribute("id", "showdiv");
document.getElementsByTagName("body")[0].appendChild(divBlock);
var tempDiv = "<div id=\"rc1\">" +
"<div class=\"w t l\"></div>" +
"<div class=\"w t r\"></div>" +
"<div class=\"c\"></div>" +
"<div class=\"w o l\"></div>" +
"<div class=\"w o r\"></div>" +
"<div class=\"c\"></div>" +
"<div class=\"w p l\"></div>" +
"<div class=\"w p r\"></div>" +
"<div class=\"c\"></div>" +
"<div id=\"rd2\">" +
content
+ "</div>" +
"<div class=\"c\"></div>" +
"<div class=\"w p l\"></div>" +
"<div class=\"w p r\"></div>" +
"<div class=\"c\"></div>" +
"<div class=\"w o l\"></div>" +
"<div class=\"w o r\"></div>" +
"<div class=\"c\"></div>" +
"<div class=\"w t l\"></div>" +
"<div class=\"w t r\"></div>" +
"</div>";
divBlock.innerHTML = "<div>" + tempDiv + "</div>";
}
//设定弹出层位置
function setPosition() {
var mouse = getMousePosition();
var scrollPosition = getScrollPosition();
var tips = document.getElementById("showdiv");
if(tips != null){
tips.style.position = "absolute";
tips.style.backgroundColor = "#FFC";
tips.style.zIndex = "10000";
tips.style.left = mouse[0]+10+"px";
tips.style.top = mouse[1]+10+"px";
var viewportSize = getViewportSize();
if (mouse[0] - scrollPosition[0] + 10 + tips.offsetWidth > viewportSize[0] - 25){
tips.style.left = scrollPosition[0] + viewportSize[0] - 25 - tips.offsetWidth + "px";
}else{
tips.style.left = mouse[0] + 10 + "px";
}
if (mouse[1] - scrollPosition[1] + 10 + tips.offsetHeight > viewportSize[1] - 25){
if (event.clientX > (viewportSize[0] - 25 - tips.offsetWidth)){
tips.style.top = mouse[1] - tips.offsetHeight - 10 + "px";
}else{
tips.style.top = scrollPosition[1] + viewportSize[1] - 25 - tips.offsetHeight + "px";
}
}else{
tips.style.top = mouse[1] + 10 + "px";
}
}
}
//获取滚动条位置
function getScrollPosition(){
var position = [0, 0];
if(typeof window.pageYOffset != 'undefined'){
position = [
window.pageXOffset,
window.pageYOffset
];
}
if(typeof document.documentElement.scrollTop != 'undefined' && document.documentElement.scrollTop > 0){
position = [
document.documentElement.scrollLeft,
document.documentElement.scrollTop
];
}else if(typeof document.body.scrollTop != 'undefined'){
position = [
document.body.scrollLeft,
document.body.scrollTop
];
}
return position;
}
//获取鼠标位置
function getMousePosition(){
var position = getScrollPosition();
if (typeof event == "undefined"){
event = window.event;
}
var cursorPosition = [0, 0];
if (typeof event.pageX != "undefined" && typeof event.x != "undefined"){
cursorPosition[0] = event.pageX;
cursorPosition[1] = event.pageY;
}else{
cursorPosition[0] = event.clientX + position[0];
cursorPosition[1] = event.clientY + position[1];
}
return cursorPosition;
}
//整个页面当前布局参数获取
function getViewportSize(){
var size = [0,0];
if (typeof window.innerWidth != 'undefined'){
size = [
window.innerWidth,
window.innerHeight
];
}else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth != 'undefined'
&& document.documentElement.clientWidth != 0){
size = [
document.documentElement.clientWidth,
document.documentElement.clientHeight
];
}else{
size = [
document.getElementsByTagName('body')[0].clientWidth,
document.getElementsByTagName('body')[0].clientHeight
];
}
return size;
}
//移除弹出层
function removeDyncDiv() {
var dyncDiv = document.getElementById("showdiv");
if(dyncDiv != null){
//将弹出层DIV块从body中移除
document.getElementsByTagName("body")[0].removeChild(dyncDiv);
}
}
</script>
</head>
<body>
<div>
<pre>
人字虽只有两笔，一撇一捺，但却不好写。这两笔内涵丰富，<a href="#" dync="哲理深奥" onmouseover="showDyncDiv(this);" onmouseout="removeDyncDiv();">哲理深奥</a>，有一笔写不好，那便是人生败笔！
一笔写出生，一笔写临终。生在人世不过短暂几十年，生时，在自我的哭声中开始，于是便向人们证明了人生的艰辛，而是他人的笑为我们迎接生命延续；终时，在别人的哭声里结束，说明人的一生为他人奉献过，付出过，从而赢得他人的留念。最好自己能笑，表白平生无憾事，从容而去。
一笔写成长，一笔写衰老。人生就是一个新陈代谢的过程，包括思想和机体。新的不断滋生，旧的不断淘汰，人只有不断接受，吸纳新生事物，不断批判，扬异，才能推陈出新，健康成长。
一笔写前进，一笔写后退。人生如登山，一步一步往山顶上攀登，到山顶，又一步一步的往下退，百折不扰，不畏艰险，勇于攀登，勇于弄潮的人固然可敬；而到了顶峰，不恋高位，激流勇退，能上能下，宠辱不惊的人，更难能可贵。
一笔写快乐，一笔写烦恼。快乐和烦恼是人生的两翼，相伴而生，<a href="#" dync="形影相随" onmouseover="showDyncDiv(this);" onmouseout="removeDyncDiv();">形影相随</a>。快乐和烦恼是人生快车两边的车轮，互相支撑缺一不可。快乐和烦恼相激励而前进。经过烦恼，痛苦和忧伤的洗礼，才感到人生的快乐和幸福。
一笔写顺境，<a href="#" dync="一笔写逆境" onmouseover="showDyncDiv(this);" onmouseout="removeDyncDiv();">一笔写逆境</a>。顺境是，浪潮起时的喧哗，逆境是浪潮落时的叹息！人生有顺境，也有逆境，甚至逆境多于顺境。顺境时不张扬，逆境时不气馁。
一笔写付出，一笔写收获。人总是活在得和失的之间，有人说：一个人处心积虑得到，必将无可奈何的失去。鱼和掌不可兼得，得不足喜，失不足忧。人生有一条不变的法则就是：一分耕耘，一分收获。我们渴望获取成功，所以需要付出，付出和收获构成得失人生。
一笔写道德，一笔写才能。德乃人之魂，才乃人之灵，有的人活着，他以死了；有人死了，他还在活着，都指的就是人之魂。人生自古谁无死，留取丹心照汗青。德和才是人字的一撇一捺，没有德这一撇，不成其人，没才那一捺，人难自立。
一笔写权力，一笔写责任。每个人都有做人的权力，同时又肩负做人的责任，不履行义务的人，只知道享受生活，不愿意创造生活，<a href="#" dync="只期盼人人为我" onmouseover="showDyncDiv(this);" onmouseout="removeDyncDiv();">只期盼人人为我</a>，不愿意我为人人。坐享其成就堕落为寄生虫。人的双肩，一肩挑权利；一肩挑责任，走完人生旅程。
一笔写自己，一笔写爱人。夫妻如同左右手，左手提东西累了，不用开口，右手就会接过来；右手受了伤，也不用呼喊左手就伸过来。相濡以沫，你扶我牵，互帮互助；夫妻又如一双筷子，什么时候都要齐心同力。酸甜苦辣一起品尝，风雨兼程，共度人生。夫妻正如人的一撇一捺，俩人合力，才能顶天立地。
一笔写朋友，一笔写对手。朋友是你在愁风，苦雨中行走时，撑起的一把伞，朋友是你在黑暗中摸索前进时，不远处的一盏灯。对手，是成功者的陪练，是失利者的良师。有时朋友就是对手，有时对手就是朋友。有了朋友和对手，人生才有不竭的动力，才有希望在人生崎岖山路的攀登中，达到光辉的顶点。
一笔写前半生，一笔写后半生。前半生生根，发芽，开花，后半生接果，收获，储藏。有的前半生穷困潦倒，后半生飞黄腾达。有的人前半生求索无路，后半生功成名就；有的人前半生灿烂辉煌，后半生暗淡无光；有的人前生桂冠显耀，后半生晚节不保。
人生的道路虽然漫长，但紧要处常常只有几步。走错一步或走对一步，<a href="#" dync="声色晚景从良" onmouseover="showDyncDiv(this);" onmouseout="removeDyncDiv();">声色晚景从良</a>足以影响人生的一个时期甚至是一生，一世胭花无碍；贞妇白头失节，半生清若俱非，无论过去多少成功，多么灿烂都不能代表未来。只能不停的耕耘，不停的砥砺，不停的鞭策，不停的学习。才能把人字的最后一笔写得更加壮丽。
写好一个人只需两笔，做好一个人却要一生。
</pre>
</div>
</body>
</html>
相关推荐
### div弹出层position属性小解 在网页布局与设计中，`position` 属性是 CSS 中一个非常重要的属性，它决定了元素如何在页面中定位。对于创建弹出层、模态框等交互式组件来说，正确理解并使用 `position` 属性至关...
在JavaScript编程中，"div弹出窗口"是一种常见的交互式设计，它允许用户在不离开当前页面的情况下查看或操作相关信息。这种技术常被用于显示警告、提示、对话框或者加载内容丰富的模块，如图片画廊、表单等。在本...
1. 创建基本结构：一个简单的弹出层可以包含一个包含信息的div元素，设置`display:none`使其默认隐藏。 ```html <div id="popup" style="display:none;"> 这是弹出层的内容 ()">关闭 </div> ``` 2. 显示和隐藏：...
本教程将详细讲解如何利用jQuery实现一个人才网上的弹出层选择工作地区特效，这对于提升用户体验和网站互动性至关重要。 首先，让我们了解jQuery的核心概念。jQuery通过提供一套简洁的API，使得开发者可以更方便地...
在网页设计中，Div（Division）层是一种基本的布局元素，用于组织和定位网页内容。"漂亮div层 精美div层"这个标题和描述暗示我们关注的是如何利用Div来创建美观、高效的网页布局。下面我们将深入探讨Div层的重要性和...
在压缩包子文件的文件名称列表中，“div”可能是指HTML中的<div>元素，这是构建网页布局的基本构建块，经常被用作创建弹出层的基础结构。在实现拖动功能时，<div>元素通常会附加特定的CSS样式和JavaScript事件监听器...
这对于控制页面中元素的堆叠顺序非常重要，特别是在有遮罩层和弹出层的情况下，我们通常希望弹出层位于遮罩层之上。 上述代码片段还包含了一段未完整的代码，但在描述中提及了参数w、h和s，它们分别代表弹出页面的...
在本文中，我们将深入探讨如何使用jQuery来实现一个可单击弹出的Div层窗口，同时具备可关闭和拖动的功能。这个功能在许多网页应用中都非常常见，它能够为用户提供交互式的用户体验，例如提示信息、用户反馈或者简单...
例如，创建一个弹出框、导航菜单或是复杂的页面布局等。合理运用CSS定位技术，可以极大地提高页面的设计灵活性和用户体验。 ### 结论 通过上述介绍可以看出，CSS定位技术是前端开发中非常重要的一部分。掌握div...
`OpenDiv`函数负责设置弹出层的初始尺寸，以及确定弹出层的位置。它接受三个参数：弹出层的宽度、高度和描述内容。代码中的`OpenNow`函数用于动态调整弹出层的尺寸，使其从初始的小尺寸逐渐放大到预设的尺寸。 值得...
Div分层常用于创建导航菜单、弹出框、轮播图、浮动侧边栏等常见网页组件。通过熟练掌握div分层，开发者可以构建出富有层次感、响应式且易于维护的网页。 综上所述，div分层是HTML和CSS中的核心概念，对于创建美观且...
在代码中可以看到，设置了弹出层的 `position` 为 `absolute`，表示它将脱离文档流并使用相对于最近的已定位的祖先元素或相对于初始包含块的绝对位置。通过设置 `z-index` 属性，可以确保弹出层在页面的最上层显示，...
- **`display`**：适合完全不需要保留空间的情况下隐藏元素，例如弹出层或对话框，在不使用时可以完全移除，不占用任何空间。 #### 四、应用场景 1. **导航栏下拉菜单**：通常使用`visibility`控制下拉菜单的显示...
Div层通常被用作HTML布局的基本构建块，可以用来创建各种元素，如弹出框、提示信息或者浮动窗口。悬浮窗则是指在用户滚动页面时始终保持在屏幕某一位置的元素，而锁屏功能则是在需要时暂停用户对整个页面的操作，...
这种技术对于创建响应式设计、弹出框、对话框或者任何需要在页面中心展示的内容至关重要。下面将详细阐述如何实现这个效果以及其相关知识点。 首先，我们需要理解CSS（Cascading Style Sheets）中的定位机制。在CSS...
通过在`href`中指定一个包含HTML的URL，或者直接在`rel`属性中定义一个数据块，可以创建包含文本、链接、表单等元素的弹出层。 ```html <a href="#htmlContent" rel="lightbox">Open HTML Content</a> <div id=...
通过熟练掌握`Div`布局、`Flexbox`和`Grid`布局，以及利用`Drag and Drop` API，我们可以创建出丰富多样的网页界面，提供优秀的用户体验。在实际开发中，应根据项目需求和浏览器兼容性选择合适的布局策略。
**问题描述**：实现一个弹出窗口的功能，该窗口出现时，背景变为灰色不可操作状态。 **解决方案**：利用CSS选择器和JavaScript可以轻松实现这一功能。首先定义CSS样式： ```css .black_overlay { display: none; ...
- `divObj.style.position = 'absolute'` 使`div`元素相对于其最近的非静态定位祖先元素定位，如果没有这样的祖先，则相对于初始包含块（通常是浏览器窗口）定位。 - `divObj.style.width` 和 `divObj.style....
在描述的场景中，目标是点击一个具有特定class的div（class="click"）来显示一个弹出层（class="pop"），而点击另一个具有特定class的div（class="page"）来关闭弹出层。为了完成这个交互，我们需要对这些div元素...