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实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
javascript时间差插件分享
Jul 18 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
vue3不同环境下实现配置代理
May 25 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过滤★等特殊符号的正则
2014/01/27 PHP
php 类自动载入的方法
2015/06/03 PHP
jQuery的三种$()
2009/12/30 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
Javascript中String的常用方法实例分析
2015/06/13 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
【python】matplotlib动态显示详解
2019/04/11 Python
基于python的列表list和集合set操作
2019/11/24 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
python 生成器需注意的小问题
2020/09/29 Python
优秀实习生感言
2014/03/01 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
保研推荐信格式
2015/03/25 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
配置Kubernetes外网访问集群
2022/03/31 Servers
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python