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

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

php中文网

发布： 2016-05-16 18:19:55

原创

1588人浏览过

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

Html代码

复制代码代码如下:

浮动窗口

这只是一个演示标题[ x ]

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.

---This is edited by Alp.

click

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; 
} 

第二种方法:
消息框遮罩层:

nothing...

'

　　页面加载loading中:

　　关闭浮动窗口:关闭窗口建议用小图片

　　打开浮动窗口:打开浮动

复制代码代码如下:

 
// 消息框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(); 
} 
}); 
} 