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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
vue实现循环滚动列表
Jun 30 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
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计算十二星座的函数代码
2012/08/21 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
javascript操作数组详解
2014/12/17 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
python获取外网ip地址的方法总结
2015/07/02 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
softmax及python实现过程解析
2019/09/30 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
模范教师事迹材料
2014/12/16 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书