jQuery之浮动窗口实现代码(两种方法)


Posted in Javascript onSeptember 08, 2010

第一种方法:
预览:
jQuery之浮动窗口实现代码(两种方法)
Html代码

<html> 
<head> 
<title>浮动窗口</title> 
<link type="text/css" rel="stylesheet" href="css/overflow.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/overflow.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var b = $("#b"); 
var overFlow = $("#over"); 
b.click(function(){ 
overFlow.fadeIn(); 
$("#mask").css("background","#111"); 
$("#mask").css("opacity","0.8"); 
}) 
$("#close").click(function(){ 
overFlow.fadeOut(); 
$("#mask").css("background","#fff"); 
$("#mask").css("opacity","1"); 
}); 
drag($("#over"),$("#title")); 
}) ; 
</script> 
</head> 
<body> 
<div id="over"> 
<div id="title"><span id="t">这只是一个演示标题</span><span id="close">[ x ]</span></div> 
<div id="content"> 
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/> 
---This is edited by Alp. 
</div> 
</div> 
<div id="mask"> <a id="b" href="#">click</a></div> 
</body> 
</html>

Js代码
function drag(overFlow,title){ 
title.onmousedown = function(evt){ 
var doc = document; 
var evt = evt || window.event; 
var x = evt.offsetX?evt.offsetX:evt.layerX; 
var y = evt.offsetY?evt.offsetY:evt.layerY; 
if(overFlow.setCapture){ 
overFlow.setCapture(); 
}else if(window.captureEvents){ 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
} 
doc.onmousemove = function(evt){ 
evt = evt || window.event; 
var xPosition = evt.pageX || evt.clientX; 
var yPosition = evt.pageY || evt.clientY; 
var newX = xPosition - x; 
var newY = yPosition - y; 
overFlow.style.left = newX; 
overFlow.style.top = newY; 
}; 
doc.onmouseup = function(){ 
if(overFlow.releaseCapture){ 
overFlow.releaseCapture(); 
}else if(window.captureEvents){ 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
} 
doc.onmousemove=null; 
doc.onmouseup=null; 
}; 
}; 
}

css代码
#over{ 
position: absolute; 
left: 300px; 
top: 200px; 
border: 1px solid black; 
display: none; 
background: #cccccc; 
cursor: default; 
width: 300px; 
z-index: 10; 
opacity: 1; 
} 
#title{ 
border: 1px solid #1840C4; 
background: #95B4DC; 
padding: 2px; 
font-size:12px; 
cursor: default; 
} 
#close{ 
cursor: pointer; 
margin-right: 1px; 
overflow: hidden; 
} 
#content{ 
border: 1px solid #C2D560; 
background: #EFF4D7; 
} 
#t{ 
margin-right:145px; 
} 
#mask{ 
z-index: 1; 
background: #fff; 
width: 1024px; 
height: 800px; 
} 
#b{ 
position: absolute; 
left: 200px; 
top: 100px; 
} 
body{ 
padding: 0px; 
margin: 0px; 
} 
#over{ 
background: transparent; 
}

第二种方法:
消息框遮罩层:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"></iframe><div id="show_upload">nothing...</div>'

页面加载loading中:<div id="body_loading" onClick="loaded();"><img src="__PUBLIC__/images/body_load.gif"></div>

关闭浮动窗口:<a href="javascript:hideupload()">关闭窗口建议用小图片</a>

打开浮动窗口:<a href="javascript:showupload('admin.php')">打开浮动</a>

// 消息框loading 
function loading(){ 
var o = $('#body_loading'); 
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px"); 
o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px"); 
o.fadeIn("fast"); 
} 
// 消息框消失 
function loaded(){ 
var o = $('#body_loading'); 
o.fadeOut("fast"); 
} 
// 隐藏浮动窗口 
function hideupload(){ 
$('#show_upload').hide(); 
$('#show_upload_iframe').hide(); 
} 
// 弹出浮动窗口 
function showupload(ajaxurl){ 
loading(); 
var o=$('#show_upload'); 
var f=$('#show_upload_iframe'); 
var top = 200; 
$.ajax({ 
url: ajaxurl, 
//cache: false, 
success: function(res){ 
loaded(); 
o.html(res); 
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px"); 
if($(document).scrollTop()>200){ 
top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2); 
} 
o.css("top",top+"px"); 
f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')}); 
f.show(); 
o.show(); 
} 
}); 
}
Javascript 相关文章推荐
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
angular select 默认值设置方法
Jun 23 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 #Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 #Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 #Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 #Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 #Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 #Javascript
Document对象内容集合(比较全)
Sep 06 #Javascript
You might like
用PHP实现WEB动态网页静态
2006/10/09 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
新手入门常用代码集锦
2007/01/11 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
Three.js学习之网格
2016/08/10 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
基于node.js之调试器详解
2017/08/22 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
Python 创建子进程模块subprocess详解
2015/04/08 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python实现的矩阵类实例
2017/08/22 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
详解Python装饰器
2019/03/25 Python
python实现图片横向和纵向拼接
2020/03/05 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
教师实习自我鉴定
2013/12/11 职场文书
大学生安全责任书
2014/07/25 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python