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脚本语言在网页中的简单应用
May 13 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
cakephp常见知识点汇总
2017/02/24 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Python操作mongodb的9个步骤
2018/06/04 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
师范生个人推荐信
2013/11/29 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
英文求职信范文
2014/05/23 职场文书
本科生求职信
2014/06/17 职场文书
金砖之国观后感
2015/06/11 职场文书
学前教育见习总结
2015/06/23 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript