<html>
<head>
<SCRIPT>
function show(){
window.event.cancelBubble = true
var divId=document.getElementById("div1");
var ob=document.getElementById("sss");
var rd=getPosition(ob);
divId.style.left=rd.x;
divId.style.top=rd.y+ob.offsetHeight;
divId.style.width=ob.offsetWidth;
divId.style.heigth="800";
divId.style.background = '#FFFFFF';
divId.style.display="block";
}
function hideDiv(){
var divId=document.getElementById("div1");
if(!checkEventObj(event.srcElement,"div1"))
divId.style.display="none";
}
function checkEventObj(obj,idName){
if(obj.tagName == "BODY"){ return false; }
if(obj.id == idName){ return true; }
else{ return checkEventObj(obj.parentElement, idName); }
}
// 得到对象的绝对坐标
function getPosition(htmlObj){
var rd = {x:0,y:0};
while(htmlObj)
{
rd.x += htmlObj.offsetLeft;
rd.y += htmlObj.offsetTop;
htmlObj= htmlObj.offsetParent;
}
return rd;
}
</SCRIPT>
</head>
<body onclick =hideDiv()>
<input type="button" id="sss" value="testddddd" onclick="show()"/>
<div id="div1" style="display:none;
BORDER: #000 1px solid;
POSITION: absolute;
">
ss<br>
bb<br>
cc<br>
cc<br>
cc<br>
</div>
</body>
</html>
分享到：
相关推荐
弹出层（通常称为弹窗或模态框）是在网页上创建的一个半透明或者全屏覆盖的独立区域，当用户触发特定事件（如点击按钮）时，这个区域会突然出现，吸引用户的注意力。在移动设备上，弹出层的设计需要考虑到屏幕大小和...
`确保其位于弹出层下方，`background-color: rgba(0, 0, 0, 0.5);`来创建半透明黑色背景。 2. **JavaScript或jQuery**：通过监听用户的点击事件来控制弹出层的显示和隐藏。例如，可以使用`addEventListener`或`on('...
2. **遮罩层**：在弹出层下方添加半透明遮罩层，可以防止用户在弹出层显示时与页面其他部分交互。 3. **关闭按钮**：提供一个明确的关闭按钮，让用户能方便地关闭弹出层。 4. **响应式设计**：考虑移动设备，确保弹...
例如，我们可以定义一个名为`fadeInUp`的动画，使得弹出层在打开时从下方淡入并向上移动。这样的动画效果可以通过以下CSS代码实现： ```css .animated { animation-duration: 1s; /* 动画持续时间 */ animation-...
3. **关闭按钮**：圆角弹出层通常包含一个关闭按钮，可以用CSS3图标或者字体图标库（如Font Awesome）来实现。 4. **定位**：弹出层的位置可以是固定的，也可以根据屏幕或元素动态计算，利用CSS的`position`属性（如...
例如，`$("#myTrigger").popupLayer({direction: "bottom", content: $("#myContent")})`这行代码会将ID为`myTrigger`的元素作为触发器，当点击时从下方弹出ID为`myContent`的内容。 `dist`和`src`文件夹通常分别...
`z-index`同样重要，确保遮罩层在弹出层下方，但高于其他页面元素。 3. **JavaScript/jQuery**： - 显示和隐藏：JavaScript或jQuery可以用来监听用户事件（如点击按钮），并在响应这些事件时显示或隐藏弹出层和...
5. 关闭弹出层：在弹出层内添加一个关闭按钮（比如“X”图标），并为其绑定`click`事件，点击时关闭弹出层。 6. 阻止默认行为：为了防止图片点击后跳转到新页面，需要在事件处理器中使用`.preventDefault()`。 这...
3. **遮罩层**：Boxy在弹出层下方添加了一层半透明的遮罩层，确保用户在弹出层操作时不会误触背景内容。 4. **自动定位**：根据屏幕大小，Boxy能自动调整弹出层的位置，确保其始终可见。 5. **键盘支持**：支持Esc键...
4. **阻止背景交互**：为了实现弹出层的阻隔效果，可以给body添加透明遮罩层，并调整其z-index使其位于弹出层下方： ```html ; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:99;...
完成交互后，用户可以通过点击关闭按钮或者按下Esc键关闭弹出层，页面恢复原状。 二、jQuery与Lightbox： jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和动画制作。在Lightbox实现中，jQuery可以方便...
**jQuery弹出层插件Gallery详解** 在网页设计和开发中，jQuery库因其简洁的语法和丰富的功能而广受欢迎。其中，弹出层（Popup）是网页交互设计中常用的一种元素，它通常用于显示详细信息、图片展示或者进行用户确认...
// 显示弹出层，并定位在TD下方 $('#popupLayer').show().css({ 'top': td.position().top + td.outerHeight(), 'left': td.position().left }); // 将值赋给弹出层的输入框 $('#popupInput').val(value); ...
在实际操作中，当用户点击或选择某个控件（如按钮或列表项）时，会在该控件下方弹出一个操作层窗口，展示更多的可选功能或参数。这种设计提高了用户体验，因为它允许用户在有限的屏幕空间内快速访问和操作更多功能。...
JavaScript是实现弹出层的关键技术，通过DOM操作、事件监听、定时器等手段，可以实现弹出层的动态显示、隐藏、动画效果和交互逻辑。例如，当用户点击按钮、滚动页面或在特定时间触发时，弹出层可以自动出现。 3. *...
遮罩层使用.bg类定义，其背景色为深灰色，覆盖整个页面，并设置了透明度来创建模态效果，使得用户在弹出层显示时，下方页面内容为暗淡效果。 在JavaScript部分，代码通过jQuery的document.ready方法确保在文档完全...
/* 弹出层位于主内容区域下方 */ left: 0; /* 对齐左侧 */ width: 200px; /* 自定义宽度 */ height: 100px; /* 自定义高度 */ background-color: #0f0; /* 绿色背景 */ display: none; /* 默认隐藏 */ } ``` ...
弹出层还可能包含导航按钮，用于浏览图片集合。 5. **使用方法** 使用Grid Gallery需要引入jQuery库和插件的JS与CSS文件。在HTML结构中，为每个图片添加相应的数据属性，并调用jQuery插件的初始化方法。例如： ``...
- `A_top` 计算触发元素（即文本框）的顶部坐标，加上其自身高度，以确保弹出层出现在触发元素下方。 - `A_left` 获取触发元素的左边缘坐标。 4. **设置样式**： - `targetId.bgiframe()` 使用 bgiframe 插件为...
这是因为默认情况下，`jQGrid`将弹出层放置在表格下方，导致无法正确显示。为了解决这个问题，我们需要自定义单元格的属性，使弹出层能够正确显示在表格之上。 通过在`colModel`中设置`cellattr: addCellAttr`，...