<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
html, body {
height: 100%;
width: 100%;
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
border: 12px solid #D6E9F1;
z-index:1002;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#f5f5f5;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.close {
float:right;
clear:both;
width:100%;
text-align:right;
margin:0 0 6px 0
}
.close a {
color:#333;
text-decoration:none;
font-size:14px;
font-weight:700
}
.con {
text-indent:1.5pc;
line-height:21px
}
</style>
<script>
function show(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='block';
fade.style.display='block';
}
function hide(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='none';
fade.style.display='none';
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="show('light')">打开</a>
<div id="light" class="white_content">
<div class="close"><a href="javascript:void(0)" onclick="hide('light')"> 关闭</a></div>
<div class="con">
<a href="#">aaaaa</a><br />
<a href="#">bbbbbb</a>
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
分享到：
相关推荐
在这个例子中，我们可能会看到一个隐藏的`div`元素，通过JavaScript控制其显示和隐藏，以达到弹出层的效果。 "openDivWindow.js"可能包含了弹出层打开的JavaScript代码。通常，这会包含一个函数，例如`openPopup()`...
**jQuery弹出层在网页登录应用中的实现** 在网页开发中，为了提供更好的用户体验，我们经常需要使用弹出层来处理一些操作，如用户登录、注册等。jQuery库以其简洁的API和强大的功能，成为了实现这些效果的首选工具...
在这个例子中，`#open-login`是一个触发弹出层显示的按钮，而`#close-login`（可以是弹出层内的一个关闭按钮）和点击弹出层自身都将触发弹出层的关闭。`fadeIn`和`fadeOut`方法分别用于平滑地显示和隐藏弹出层，...
这里我们关注的是一个包含`jquery.DOMWindow`脚本的弹出层例子。`jQuery`是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互等任务。`DOMWindow`则是基于jQuery的一个插件，用于创建可定制的弹出...
在本文中，我们将深入探讨如何在layui框架中利用弹出层（layer）进行回调操作，以便获取弹出层内的数据。layui是一个轻量级、模块化的前端UI框架，提供了丰富的组件，包括弹出层功能，使得用户交互变得更加便捷。在...
在这个例子中，`#show_popup`是触发弹出框显示的按钮ID，`#close_popup`是关闭按钮ID。 此外，jQuery还有许多插件可以帮助创建更复杂的弹出框效果，如jQuery UI的Dialog组件，或者Bootstrap的Modal插件。这些插件...
在"弹出层效果例子 - 搭配frames 经典!"这个主题中，我们将深入探讨如何在ASP.NET和JavaScript环境中实现这种效果。 首先，让我们了解弹出层的基本概念。弹出层，又称为模态窗口或对话框，是在主页面上覆盖一层半...
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
在这个例子中，`#open_popup`是触发弹出层显示的按钮，而`#close_popup`则是关闭弹出层的按钮。 4. **动画效果**：jQuery提供了丰富的动画效果，如淡入淡出(`fadeIn/fadeOut`)、滑动(`slideToggle`)等，可以添加到...
在JavaScript中，弹出层通常指的是通过编程方式在网页上动态创建或显示一个浮动的div元素，用于展示信息、提示用户或收集用户输入。这种技术广泛应用于网页交互设计，尤其在不需要新窗口或完全刷新页面的情况下。在...
在这个例子中，当弹出层打开时，`dialogOpen`变量被设置为`true`。当尝试刷新页面时，如果`dialogOpen`为`true`，那么页面刷新会被阻止，并向用户显示一个警告消息。 然而，这种做法可能会引起用户体验上的问题，...
本文将深入探讨如何使用jQuery实现一个弹出层（popup）功能，使得弹...通过理解这个例子，开发者可以进一步掌握jQuery事件处理、DOM操作以及CSS定位等技术，从而在实际项目中构建更复杂、更符合用户体验的弹出层功能。
在这个例子中，`#openPopup`是一个触发弹出层显示的按钮，`#closePopup`是用于关闭弹出层的按钮。`fadeIn()`和`fadeOut()`方法分别用于淡入和淡出效果，增强了用户体验。 `images`目录可能包含了用于美化弹出层的...
在这个例子中，JavaScript会监听用户的点击或其他事件，然后触发弹出层的显示和隐藏。此外，由于提到可以传参数，这意味着`script.js`可能包含了一些函数，允许开发者传递参数来控制弹出层的行为，比如设置弹出层的...
在这个“DIV弹出层+定位”的例子中，我们关注的是如何利用`DIV`来创建一个可滑动的弹出层，并且使其在页面上保持固定的位置。这种功能通常用于显示提示信息、模态对话框或者加载额外的内容。 首先，`DIV弹出层`是指...
《jQuery Webox 弹出层展示及其源代码详解》 在网页开发中，弹出层是一种常见的交互设计，用于提供信息提示、用户确认或者展示详细内容。jQuery Webox 是一个功能丰富的弹出层插件，它能够帮助开发者轻松实现各种...
在这个例子中，`#openPopup`是触发弹出层的按钮，而`.close`则是用于关闭弹出层的元素。当用户点击按钮时，`show`类被添加到弹出层上，从而启动CSS动画并显示弹出层；点击关闭按钮时，`show`类被移除，弹出层随之...
弹出层可以包含各种内容，如文本、图片、表单或，就像在这个例子中，一个表格。 接下来，让我们关注如何在弹出层中实现表格功能。HTML的`<table>`元素是构建表格的基础，但为了实现动态效果，我们需要借助...
"jQuery弹出层的例子"是关于如何使用jQuery创建动态、交互式的弹出窗口或对话框的教程。这个例子特别关注的是实现一个登录弹出层，这对于网页中的用户认证和数据收集是非常常见的需求。 首先，我们来理解jQuery弹出...