快捷導(dǎo)航

jQuery之浮動(dòng)窗口實(shí)現(xiàn)代碼(兩種方法)

更新時(shí)間：2010年09月08日 09:43:23 作者：

今天公司要求實(shí)現(xiàn)浮動(dòng)窗口效果，自己看了不少資料終于實(shí)現(xiàn)此效果。用jQ實(shí)現(xiàn)浮動(dòng)窗口功能,彈出窗口時(shí)背景變暗.

第一種方法:
預(yù)覽:

Html代碼

 
<html> 
<head> 
<title>浮動(dòng)窗口</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">這只是一個(gè)演示標(biāo)題</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代碼

復(fù)制代碼代碼如下:

 
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代碼

復(fù)制代碼代碼如下:

 
#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>'

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

　　關(guān)閉浮動(dòng)窗口:<a href="javascript:hideupload()">關(guān)閉窗口建議用小圖片</a>

　　打開(kāi)浮動(dòng)窗口:<a href="javascript:showupload('admin.php')">打開(kāi)浮動(dòng)</a>

復(fù)制代碼代碼如下:

 
// 消息框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"); 
} 
// 隱藏浮動(dòng)窗口 
function hideupload(){ 
$('#show_upload').hide(); 
$('#show_upload_iframe').hide(); 
} 
// 彈出浮動(dòng)窗口 
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(); 
} 
}); 
} 