<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax选项卡、隔行换色、弹出层</title>
<style type="text/css">
* {margin:0;padding:0;list-style:none;font-size:12px;line-height:20px;font-family:Arial;}
h1,h2,h3 { font-size:14px; margin:10px 0;}
hr { margin:10px 0; height:1px;clear:both;border:0; background:#c00;}
a:link,a:visited{color:#164A84;text-decoration:none;}
a:hover,a:active{color:#c00;text-decoration:underline;}
table { border-collapse:collapse;border:1px solid #ccc;border-width:1px 1px 0 0; margin-left:20px;}
td,th { padding:5px;border:1px solid #ccc;border-width:0 0 1px 1px;}
</style>
<script type="text/javascript">
function BtHide(id){var Div = document.getElementById(id);if(Div){Div.style.display="none"}}
function BtShow(id){var Div = document.getElementById(id);if(Div){Div.style.display="block"}}
function BtTabRemove(index,head,divs) {
var tab_heads = document.getElementById(head);
if (tab_heads) {
var lis = tab_heads.getElementsByTagName("li"); var as = tab_heads.getElementsByTagName("a");
for(var i=0;i<as.length;i++){lis[i].className = "";BtHide(divs+"_"+i);if (i==index) {lis[i].className = "current";}}
BtShow(divs+"_"+index)}
}
function BtPopload(showId){// http://www.codefans.net
var h = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) + 'px';
var w = document.documentElement.scrollWidth + 'px';
var popCss = "background:#000;opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0;overflow:hidden;"
var exsit = document.getElementById("popBox");
if (!exsit) {
pop_Box = document.createElement("div");pop_Box.id = "popBox";
document.getElementsByTagName("body")[0].appendChild(pop_Box);
pop_Box.style.cssText = popCss;pop_Box.style.zIndex = "10";
pop_Box.style.height = h;pop_Box.style.width = w;
alert(pop_Box.style.width);
pop_Iframe = document.createElement("iframe");pop_Iframe.id = "popIframe";
document.getElementsByTagName("body")[0].appendChild(pop_Iframe);
pop_Iframe.style.cssText = popCss;pop_Iframe.style.zIndex = "9";
pop_Iframe.style.height = h;pop_Iframe.style.width = (parseInt(w)-5)+"px";
}
BtShow("popIframe");BtShow("popBox");BtShow(showId);
pop_Win = document.getElementById(showId);
pop_Win.style.position = "absolute";
pop_Win.style.zIndex = "11";
pop_Win.style.top = document.documentElement.scrollTop+document.documentElement.clientHeight/2-pop_Win.offsetHeight/2+ 'px';
pop_Win.style.left = (document.documentElement.clientWidth/2-pop_Win.offsetWidth/2) + 'px';
}
function BtPopShow(Bid,Did) {
var UploadBtn = document.getElementById(Bid);
if (UploadBtn){UploadBtn.onclick = function() {BtPopload(Did);return false;}}
}
function BtPopHide(Bid,Did) {
var UploadBtn = document.getElementById(Bid);
if (UploadBtn){UploadBtn.onclick = function() {BtHide(Did);BtHide("popBox");BtHide("popIframe");return false;}}
}
</script>
</head>
<body style="padding:0 40px;">
代码绝对精简的仿lightbox效果弹出层
<style type="text/css">
.pop { border:8px solid skyblue;width:400px; background:#fff; padding:12px; display:none;}
</style>
<a href="#" id="open" style="margin-left:20px">点击弹出</a>
<div class="pop" id="pop">
<a href="#" id="close">点击关闭</a>
<input name="notifyNames" type="checkbox" />name1
<input name="notifyNames" type="checkbox" />name2
<input name="notifyNames" type="checkbox" />name2
<input name="notifyNames" type="checkbox" />name2
<input name="notifyNames" type="checkbox" />name2
<input name="notifyNames" type="checkbox" />name2
<input name="notifyNames" type="checkbox" />name2
<input name="notifyNames" type="checkbox" />name2
<input name="notifyNames" type="checkbox" />name2
<input name="notifyNames" type="checkbox" />name2
</div>
<script type="text/javascript">BtPopShow("open","pop");BtPopHide("close","pop")</script>
</body>
</html>
分享到：
相关推荐
在软件开发中，"弹出框"是一种常见的用户界面元素，用于向用户显示临时信息、请求用户确认操作或提供输入选项。"好用的弹出框"标题表明我们讨论的是设计得良好、易于使用且功能丰富的弹出框。在描述中，"弹出框弹出...
标题提到的“好用的jquery类似QQ页面右下角弹出窗口”是指利用jQuery实现的一种模仿QQ聊天窗口从页面右下角弹出的效果。这种效果在网页通知、消息提示等方面非常常见，能够吸引用户的注意力而不会过于打扰他们的浏览...
标题中的“一个简单好用的弹出层”指的是在网页前端开发中常见的一种交互元素，通常称为模态框（Modal）或对话框。这种组件在用户界面设计中扮演着重要角色，它能在用户与主页面交互的过程中临时显示额外信息、进行...
弹出层在用户界面上创建了一个临时突出显示的区域，用于显示额外的信息、提示、表单或者任何需要用户注意的内容，而不会中断主页面的工作流程。本知识点将详细讲解“简单好用的JS弹出层”所涉及的技术和特性。 首先...
在IT行业中，弹出层（通常称为模态窗口或对话框）是一种常见的用户界面元素，用于在不离开当前页面的情况下显示额外信息或交互功能。"好用的弹出层"这个主题显然关注的是如何实现高效、用户体验良好的弹出层设计。在...
在JavaScript的世界里，弹出层（也称为模态对话框或浮层）是一种常见的用户界面元素，用于在当前页面上显示额外的信息或者进行特定的操作，而不会让用户离开主页面。这个"一个很好用的 js 弹出层"显然是一个自定义...
"好用的移动端弹出窗口"这个项目就是针对这种需求提供的一种解决方案。它基于jQuery库，允许开发者自定义弹出窗口的样式，以适应各种不同的应用场景和设计风格。 jQuery是一个广泛使用的JavaScript库，它简化了HTML...
在IT领域，尤其是在Web开发中，模态弹出窗口是一种常见的用户界面元素，它能够吸引用户的注意力并提供交互式操作。本资源提供的是一款在ASP.NET平台下非常好用且可自定义外观的模态弹出窗口源码。下面将详细介绍这款...
标题中的“超级好用的弹出层”通常指的是在网页设计或前端开发中，用于创建交互式用户体验的一种组件。这种组件通常称为模态窗口、对话框或者弹出框，它会在用户与页面交互时突然出现，展示额外的信息或提供额外的...
在iOS开发中，弹出视图（Popup View）是一种常见的用户界面元素，它可以在主界面之上显示临时信息或提供交互选项。"ios-简单好用的弹出视图.zip" 提供了一个弹出视图的示例代码，尽管开发者自评其编写一般，但这个...
- **模态对话框**：通过设置`modal: true`，可以创建阻塞用户界面的模态对话框，防止用户在弹出层未关闭时操作其他部分。 - **自定义事件**：dialogs框架提供了`open`、`close`等生命周期事件，可以监听并处理这些...
"很好用的Dialog弹出框"这个标题暗示我们将讨论如何创建和使用一个功能强大的、易于定制的`Dialog`实例。描述中的“给出demo，用起来很简单”意味着我们将通过一个简单的示例来阐述`Dialog`的使用方法。 `Dialog`的...
【C#气泡弹出提示框控件详解】 在C#编程中，用户界面的交互设计至关重要，其中提示框控件是提供用户反馈信息的重要工具。传统的MessageBox虽然简单易用，但其样式单一，不能满足一些高级应用的需求。本文将详细介绍...
弹出框通常用于在用户与页面交互时显示额外信息或提供交互界面，如警告、确认对话框、登录表单等。遮盖层则是在弹出框出现时覆盖整个页面，以减少背景元素的干扰，提高用户体验。 1. **创建基础结构**：在HTML中，...
在标题提到的“非常好用的jquery弹出层插件”，我们可以推测这是一个预封装的组件，它可能包含了多种弹出层样式和行为，以便开发者能够快速集成到他们的项目中。弹出层插件通常包括以下关键功能： 1. **触发方式**...
本篇文章将深入探讨 jQuery 中的弹出窗口功能，以及如何利用 AJAX 进行数据异步加载。我们将通过实例和参数说明来详细解释这一过程。 首先，jQuery 提供了多种弹出窗口的实现方式，如 `alert()`, `confirm()`, 和 `...
PopupWin是一款专为微软Windows操作系统设计的右下角弹出框插件，它提供了一种高效、便捷的方式来显示系统通知或者应用程序消息。该插件以其轻量级、易集成和高度自定义的特点受到开发者的欢迎。在源码下载中，我们...
标题中的“真正屏幕右下角弹出消息窗口”是指一种技术实现，它允许在操作系统桌面的右下角创建一个独立的、不会随主窗口最小化而消失的通知窗口。这种技术通常用于模仿像QQ和MSN这样的即时通讯软件的提醒功能，它们...
例如，点击一个按钮后，可以设定页面跳转或者弹出新的窗口。这种交互性使得原型更加生动，便于向开发者或客户展示并获取反馈。 颜色和字体的选择也是界面设计的重要部分。GUI Design Studio提供了丰富的色彩和字体...