<!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>无标题文档</title>
<script src="jquery-2.0.3.min.js" type="text/javascript"></script>
<script>
//Figure out what browser is being used (Fixed the issue jquery version after 1.9)
$.browser = {
mozilla : /firefox/.test(navigator.userAgent.toLowerCase()),
webkit : /webkit/.test(navigator.userAgent.toLowerCase()),
opera : /opera/.test(navigator.userAgent.toLowerCase()),
msie : /msie/.test(navigator.userAgent.toLowerCase()),
};
</script>
<script>
/**
* 自定义插件：实现在浏览器中定位窗口的位置 这里根据用户传过来的参数进行设置窗口的位置(上下左右4个角落以及中间)
*
* @param height
* 窗体高度，如400(建议不带单位,默认为px)
* @param width
* 窗体宽度，如600(建议不带单位,默认为px)
* @param title
* 窗体顶端的标题
* @param message
* 窗体显示的内容
* @param left
* 表示窗口水平位置-->可选值："center"、"left"、"right"、具体的数值,如：200
* @param top
* 表示窗口垂直位置-->可选值："center"、"top"、"bottom"、具体的数值,如：300
* @param type
* 表示类型
* 可选值："default"、"rollup"。default--->表示默认的,没有动画。rollup--->表示在右下角滑上来(像QQ消息提示框一样)
*
*/
$.fn.popUpWin = function(args) {
var currentWin = this; // 将当前对象设置成currentWin，以方便使用
var windowObj = $(window); // 转化window为JQuery对象
var winWidth = 600; //windos's width
var winWidthUnit = '600px'; //width with unit
var winHeight = 400; //windows's height
var winHeightUnit = '400px'; //width with unit
var browserWidth = windowObj.width(); // 浏览器的宽
var browserHeight = windowObj.height(); // 浏览器的高
var scrollLeft = windowObj.scrollLeft(); // 获取滚动条的左边距(滚动条里最左端的差距)
var scrollTop = windowObj.scrollTop(); // 获取滚动条的上边距
var winLeft; // 窗口的左边距
var winTop; // 窗口的上边距
var positionLeft;
var positionTop;
var title = 'Message Dialog';
var message = 'No message show up!';
var type; //窗口类型
//check if it is a number
function isNumber(tester){
var re = /\D+/;
return !re.test(tester);
}
//get number from strig such as 600px will return 600
function getNumber(str) {
var re = /^\d+/;
return str.match(re);
}
function getUnion(str) {
var re = /\D+/;
return str.match(re);
}
// init params
if (args && args instanceof Object) {
if(args.height && args.height!=''){
if(isNumber(args.height)){
winWidth = args.height;
winWidthUnit = args.height + 'px';
} else {
winWidth = getNumber(args.height);
winWidthUnit = args.height;
}
}
if(args.width && args.width!=''){
if(isNumber(args.width)){
winWidth = args.width;
winWidthUnit = args.width + 'px';
} else {
winWidth = getNumber(args.width);
winWidthUnit = args.width;
}
}
if(args.title && args.title!='') {
title = args.title;
}
if(args.message && args.message!=''){
message = args.message;
}
if(args.type && args.type!='') {
type = args.type;
}
if(args.left && args.left!='') {
positionLeft = args.left;
}
if(args.left && args.top!='') {
positionTop = args.top;
}
}
/*
* init component
*/
function initComponent(){
var appendStr = "<div class='pop_up_title'><span class='pop_up_cls'><input type='button' value='Close'/></span><span class='pop_up_txt'>"
+ title
+ "</span></div><hr color='#0099FF'/><div class='pop_up_content'><span class='pop_up_content_txt' style='"
+ (winHeight-50)
+ getUnion(winHeightUnit) + ";'>"
+ message
+ "</span></div>";
currentWin.addClass("pop_up_window");
currentWin.css( {
"width" : winWidthUnit,
"height" : winHeightUnit
});
currentWin.append(appendStr);
}
// init component
initComponent();
// 处理水平位置的参数
function calLeft(positionLeft, scrollLeft, browserWidth, winWidth) {
if (positionLeft && typeof positionLeft == "string") { // 判断参数为字符串
if (positionLeft == "center") { // left参数为center，则水平居中
winLeft = (browserWidth - winWidth) / 2 + scrollLeft;
} else if (positionLeft == "left") { // left参数为left，则水平居左
winLeft = scrollLeft;
} else if (positionLeft == "right") { // left参数为right，则水平居右
winLeft = scrollLeft + browserWidth - winWidth;
} else { // 用户输入了其他字符串，则改为默认居中
winLeft = (browserWidth - winWidth) / 2 + scrollLeft - 30;
}
} else if (positionLeft && typeof positionLeft == "number") { // 判断参数为数值,则根据数值直接设置
winLeft = positionLeft;
} else { //其他情况,默认居中。如：没有输入该参数或非法字符
winLeft = (browserWidth - winWidth) / 2 + scrollLeft;
positionLeft = "cneter";
}
}
// 处理垂直位置的参数
function calTop(positionTop, scrollTop, browserHeight, winHeight) {
if (positionTop && typeof positionTop == "string") {
if (positionTop == "top") {
winTop = scrollTop;
} else if (positionTop == "center") {
winTop = (browserHeight - winHeight) / 2 + scrollTop;
} else if (positionTop == "bottom") {
winTop = scrollTop + browserHeight - winHeight;
} else {
winTop = (browserHeight - winHeight) / 2 + scrollTop;
}
} else if (positionTop && typeof positionTop == "number") { // 判断参数为数值,则根据数值直接设置
winTop = positionTop;
} else {
winTop = (browserHeight - winHeight) / 2 + scrollTop;
positionTop = "center";
}
}
// *******这里很重要，将传过来的参数缓存在data.positionLeft中，这样做是为了在后面滚动条滚动或浏览器大小改变时使用，这里有点像java中的hashMap
currentWin.data("positionLeft", positionLeft); // 缓存数据
currentWin.data("positionTop", positionTop); // 缓存数据
// 移动窗口,此方法仅供滚动条滚动以及窗口大小时使用，不适合初始化(就是在加载页面时，调用了该插件)时使用，因为一开始不存在currentWin.data("positionLeft")和currentWin.data("positionTop")的值
function moveWin() {
// 重新获取一些值并调用响应的内部函数进行设置
var browserWidth = windowObj.width(); // 浏览器的宽
var browserHeight = windowObj.height(); // 浏览器的高
var scrollLeft = windowObj.scrollLeft(); // 获取滚动条的左边距(滚动条里最左端的差距)
var scrollTop = windowObj.scrollTop(); // 获取滚动条的上边距
// 调用方法重新计算左边距和上边距
calLeft(currentWin.data("positionLeft"), scrollLeft, browserWidth,
winWidth);
calTop(currentWin.data("positionTop"), scrollTop, browserHeight,
winHeight);
// 设置窗口位置
currentWin.animate( {
"left" : winLeft,
"top" : winTop
}, 200); // 注意：currentWin在css定义中一定要注明position:absolute;
}
//窗口类型
if(type && type == "rollup"){ //这里实现像QQ消息框效果,在右下角滑上来，并慢慢淡出
//如果窗口可见，将其设置成隐藏
if(currentWin.is(":visible")){
currentWin.hide();
}
calLeft(positionLeft, scrollLeft, browserWidth, winWidth);
calTop(positionTop, scrollTop, browserHeight, winHeight);
var left = winLeft;
if($.browser.mozilla){ //修正firefox左边距
left = winLeft-10;
}
currentWin.css( {
"left" : left,
"top" : winTop + winHeight
});
currentWin.show(500).animate( {
"top" : winTop
}, 500)
var fadeOutTimeOut;
clearTimeout(fadeOutTimeOut); // 先清除所有延时，以免重复叠加
fadeOutTimeOut = setTimeout(function() {
currentWin.fadeOut(25000).dequeue();//15秒淡出 《dequeue()：去除动画队列中第一个动画，但该动画仍会继续执行，这样能保证后面的动画不需要等到第一个动画执行完才执行,这样可以防止在滚动条滚动时能在淡出的同时也能移动位置》
}, 3000); // 3秒后开始淡出
//鼠标悬停在窗口上,取消隐藏
currentWin.mouseover(function(){
if(!currentWin.is(":visible")){ //若窗口本身为不可见时不执行后面两句语句
return;
}
currentWin.stop(true,true);
currentWin.fadeIn(0);
});
//鼠标移开，3秒后再次隐藏
currentWin.mouseout(function(){
if(!currentWin.is(":visible")){
return;
}
clearTimeout(fadeOutTimeOut); // 先清除所有延时，以免重复叠加
fadeOutTimeOut = setTimeout(function() {
currentWin.fadeOut(25000).dequeue();
}, 3000);
});
} else { //普通情况
calLeft(positionLeft, scrollLeft, browserWidth, winWidth);
calTop(positionTop, scrollTop, browserHeight, winHeight);
currentWin.css( {
"left" : winLeft,
"top" : winTop
});
currentWin.show("slow"); //显示窗口
}
// 为当前窗口注册滚动条滚动事件，在滚动条滚动时能够动态改变窗口的位置
windowObj.scroll(function() {
if (!currentWin.is(":visible")) {
return;
}
var scrollTimeOut; // 延时处理,由于拉动滚动条时不断改变窗口位置会导致浏览器会一闪一闪,所以通过延时修改
clearTimeout(scrollTimeOut); // 先清除所有延时，以免重复叠加
scrollTimeOut = setTimeout(function() {
moveWin();
}, 300); // 延时300毫秒
});
// 为当前窗口注册浏览器大小改变事件
windowObj.resize(function() {
if (!currentWin.is(":visible")) { // 判断若当前窗口为不可见则不进行该事件的处理
return;
}
moveWin();
});
// 注册关闭窗口事件
$(currentWin).find("span[class='pop_up_cls']").click(function() {
$(currentWin).fadeOut(0);
});
return currentWin;
}
</script>
<script>
function load(){
$("#test").popUpWin({
title: "testing",
message: "testing message!",
width:'600px',
height: '400px',
left:'center',
top:'center'
});
}
</script>
<style>
/*整个窗体的样式*/
.pop_up_window{
/*background-color:#D0DEF0;*/
/*width:600px;
height:400px;*/
border:5px solid #B3D9FF;
margin:0px;
display:none;
position: absolute;
z-index:999;
}
/*窗体内容区的样式*/
.pop_up_content{
background-color:#FFF;
width:100%;
height:350px;
/* position:relative;*/
}
/*窗体标题栏的样式*/
.pop_up_title{
marging:0;
padding:0;
border:0;
width:100%;
height:25px;
background:#FFF;
font-size:14px;
font-weight:bold;
}
/*窗体标题右侧图片的样式*/
.pop_up_title .pop_up_cls{
padding:0;
margin-top:3px;
width:65px;
height:25px;
overflow:hidden;
display:block; /*一定要设置成block不然不会显示*/
float:right;
}
/*窗体标题文字的样式*/
.pop_up_title .pop_up_txt{
display:block;
height:25px;
line-height:25px;
margin-left:5px;
}
/*内容区文本（主体文本）*/
.pop_up_content_txt{
marging:0;
padding:0 5px;
display:block;
/*height:350px;*/
background:#CBE7FC;
overflow:auto; /*这里设置的auto是为了当要显示的内容过多时，会自动出现滚动条*/
}
</style>
</head>
<body onload="load()">
<div id="test">
</div>
</body>
</html>
分享到：
发表评论
-
javascript
2013-06-08 21:15 683虽然大学2年级就开始学了，但总觉得基础差，找了原版的javas ... -
页面布局 - 三栏 - 左、中间栏固定 - 右栏自动适应到右边或者适应到左、中栏的下面
2013-06-07 19:44 779<!DOCTYPE html> <html ... -
页面布局 - 三栏 - 中间栏固定 - 左右两栏自适应
2013-06-07 17:00 1329<!DOCTYPE html > <htm ... -
页面布局 - 两栏 - 一栏固定、一栏自适应
2013-06-07 16:58 841<!DOCTYPE html> <html ... -
HTML
2013-03-25 17:24 6231.标题很重要 请确保将 HTML heading ...
相关推荐
本资源"jquery插件库-jquery弹出层 三种弹出效果.zip"聚焦于jQuery的一个特定应用：弹出层效果。下面我们将详细探讨jQuery弹出层的原理、实现方式以及三种不同的弹出效果。 1. jQuery弹出层基础 jQuery弹出层，通常...
通过以上步骤，我们可以创建一个功能齐全、易于扩展的jQuery自定义弹出窗口插件。这不仅提高了代码的复用性，也使得开发者能够根据项目需求轻松定制弹出窗口的行为和样式。在实际开发中，结合CSS和可能存在的其他...
jQuery Fancybox是一个轻量级的插件，其主要功能是创建一个美观的、具有多种自定义选项的弹出窗口，用于展示图片、HTML内容甚至是YouTube视频。Fancybox 1.3.4是该插件的一个经典版本，虽然现在已经有更新的版本，但...
综上所述，jQuery提供了多种弹出窗口的实现方式，包括使用jQuery UI Dialog、自定义HTML/CSS/JavaScript以及使用插件。开发者可以根据项目需求选择合适的方法来创建弹出窗口，提升用户体验。通过不断学习和实践，您...
1. **对话框（Dialog）**：Dialog 组件允许将任何 HTML 元素转化为弹出式窗口，常用于提示、确认或展示详细信息。1.8.6 版本中的 Dialog 支持多种配置选项，如自动关闭、拖动、大小调整等。 2. **日历（Datepicker...
3. **对话框 (Dialog)**：提供模态和非模态的弹出窗口，用于显示信息、确认操作或进行更复杂的交互。 4. **日期选择器 (Datepicker)**：为输入字段添加日期选择功能，支持多种格式和选项。 5. **滑块 (Slider)**：...
"jquery插件库-jquery导航，缓慢弹出下拉效果.zip"这个压缩包文件显然包含了一个专门针对导航菜单的jQuery插件，该插件实现了优雅的、缓慢弹出的下拉效果。 jQuery插件是扩展jQuery功能的小型代码模块，它们通常由...
**jQuery自定义滚动条插件**是一种用于增强网页滚动体验的工具，尤其在现代Web设计中，为了提供更美观和个性化的界面，自定义滚动条变得越来越重要。本插件适用于IE8及以上的浏览器，允许开发者对滚动条的外观和行为...
与同类弹出层组件相比，layer的优势明显，她尽可能地在以更少的代码展现出更强健的功能。layer格外注重性能的提升，采用面向对象的思想实现，在多层模式的回调处理中，具备其它多数层组件所没有的“独立不冲突”（已...
例如，jqGrid的搜索功能可以利用jQuery UI的对话框组件，以弹出窗口的形式展示搜索条件。此外，使用jQuery UI的拖放功能，可以实现列的动态调整，让用户自由定制显示的列。 压缩包中的“jquery-1.7.1.min.js”是...
**jQuery Grid 插件详解——打造可编辑表格** 在网页开发中，展示和管理大量数据时，表格（Table）是一个常见的元素。jQuery Grid 插件为网页开发者提供了一个强大而灵活的工具，用于创建功能丰富的表格，特别是...
`jquery-ui-dialog-demo` 是一个基于 jQuery UI 库的弹出窗口插件示例，它提供了丰富的交互式对话框功能，包括模拟原生 JavaScript 的 `alert` 和 `confirm` 对话框以及自定义的打开（open）模式。这个插件使得在...
2. **样式管理**：弹出层的外观和布局可以通过CSS进行定制，插件通常会提供一些预设样式或允许自定义CSS类。 3. **事件处理**：插件会监听用户与弹出层的交互，例如关闭按钮的点击事件，以及可能的拖动或缩放行为。...
Dialog 是一个弹出式窗口，可以用于显示警告、确认信息，或者创建模态对话框，让用户输入数据或进行其他操作。在 jQuery UI 1.7.1 中，Dialog 提供了丰富的定制选项，如可调整大小、可拖动、可设置关闭按钮等，使得...
模态框在网页设计中被广泛应用，用于显示弹出式窗口，如警告、确认对话框或者展示详细信息，而不会离开当前页面。jQuery-Modal-Plug插件使得在网页上实现这种功能变得更为简单。 **模态框（Modal Box）**是用户界面...
例如，如果你的项目只需要使用弹出对话框（Dialog）和日期选择器（Datepicker），则可以仅包含这两个组件，去除其他不必要的代码，降低页面的体积。同时，jQuery UI 还提供了多种预设主题，如 "smoothness"、...
jQuery插件是jQuery库的扩展，它们为开发者提供了现成的功能模块，覆盖了诸如表单验证、图片轮播、菜单导航、日期时间选择器、滑块、弹出窗口、滚动效果等众多领域。这些插件通常由社区开发并维护，它们遵循jQuery的...
《jQuery+CSS3多功能弹出层插件v2.0.1详解》 在Web开发中，弹出层（也称为对话框或模态窗口）是不可或缺的元素，它们用于显示重要的信息、提示用户确认操作或者提供交互式内容。本文将深入探讨一款名为“20种弹出层...
例如，Datepicker 组件可以方便地添加日期选择功能，而 Dialog 可以创建模态或非模态窗口，提供弹出信息或确认操作。 在1.8.18.custom 版本中，"custom" 关键字意味着这是一个根据特定需求定制的版本，可能包含了...