应用于Domino的Javascript浮动的提示窗口
时间：2010-10-13 来源：sheme
效果图:
先在页面插入如下代码:
<DIV class="coverDiv" id="coverDiv" style="display:none"><IFRAME id="coverDivFrame" name="coverDivFrame" src="about:blank" frameBorder=0 width="100%" height="100%"></IFRAME></DIV>
<DIV onMouseUp="releasedivwindow();" class="Shadow" onMouseDown="catchdivwindow();" id="div_window" style="Z-INDEX: 999999; LEFT: 0px; display:none; OVERFLOW: auto; POSITION: absolute; TOP: 0px; CURSOR: move">
<TABLE id=flyTailer height=400 cellSpacing=0 cellPadding=0 width=600 border=0>
<TBODY>
<TR>
<TD vAlign=top height=26>
<TABLE style="TABLE-LAYOUT: fixed; CURSOR: move" cellSpacing=0
cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width=1 height=26><IMG height=26
src="/oasrc/index/window_topbar_line.gif" width=1></TD>
<TD class=windowtopbartitle
ondblclick="javascript:max_divwindow()"><IMG height=16
src="/oasrc/index/title.gif" width=16 align=absMiddle border=0>
<span id="flyTailerTitle" title="提示窗口">提示窗口</span></TD>
<TD class=windowtopbarbtn vAlign=top width=100><IMG
onmousedown="MM_swapImage('winbtn1','','/oasrc/index/window_min_down.gif',1)"
id=winbtn1
onmouseover="MM_swapImage('winbtn1','','/oasrc/index/window_min_hover.gif',1)"
style="CURSOR: default" onfocus=this.blur()
onclick="javascript:min_divwindow()"
onmouseout=MM_swapImgRestore() height=17
src="/oasrc/index/window_min.gif" width=26 border=0
name=winbtn1><IMG
onmousedown="MM_swapImage('winbtn2','','/oasrc/index/window_default_down.gif',1)"
id=winbtn2
onmouseover="MM_swapImage('winbtn2','','/oasrc/index/window_default_hover.gif',1)"
style="DISPLAY: none; CURSOR: default" onfocus=this.blur()
onclick="javascript:min_divwindow()"
onmouseout=MM_swapImgRestore() height=17
src="/oasrc/index/window_default.gif" width=26 border=0
name=winbtn2><IMG
onmousedown="MM_swapImage('winbtn3','','/oasrc/index/window_max_down.gif',1)"
id=winbtn3
onmouseover="MM_swapImage('winbtn3','','/oasrc/index/window_max_hover.gif',1)"
style="CURSOR: default" onfocus=this.blur()
onclick="javascript:max_divwindow()"
onmouseout=MM_swapImgRestore() height=17
src="/oasrc/index/window_max.gif" width=25 border=0
name=winbtn3><IMG
onmousedown="MM_swapImage('winbtn4','','/oasrc/index/window_mid_down.gif',1)"
id=winbtn4
onmouseover="MM_swapImage('winbtn4','','/oasrc/index/window_mid_hover.gif',1)"
style="DISPLAY: none; CURSOR: default" onfocus=this.blur()
onclick="javascript:max_divwindow()"
onmouseout=MM_swapImgRestore() height=17
src="/oasrc/index/window_mid.gif" width=25 border=0
name=winbtn4><IMG
onmousedown="MM_swapImage('winbtn5','','/oasrc/index/window_close_down.gif',1)"
id=winbtn5
onmouseover="MM_swapImage('winbtn5','','/oasrc/index/window_close_hover.gif',1)"
style="CURSOR: default" onfocus=this.blur()
onclick="javascript:Hidedivwindow()"
onmouseout=MM_swapImgRestore() height=17
src="/oasrc/index/window_close.gif" width=42 border=0
name=winbtn5></TD>
<TD width=1><IMG height=26
src="/oasrc/index/window_topbar_line.gif"
width=1></TD></TR></TBODY></TABLE></TD></TR>
<TR id=flyTailerTr name="flyTailerTr">
<TD id=flyTailerHolder vAlign=top height="100%"
name="flyTailerHolder"><IFRAME id="flyTailermain" name="flyTailermain" frameBorder=0 src="about:blank" width="100%" height="100%"></IFRAME></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
Javascript代码如下:
//弹出窗口参数设置
var dragWinID = 'div_window';
var flyTailerID = 'flyTailer';
var flyTailerTrID = 'flyTailerTr';
var iframeID = 'flyTailermain';
var coverDivID = 'coverDiv';
var titleID = 'flyTailerTitle';
var winbtn1 = 'winbtn1';
var winbtn2 = 'winbtn2';
var winbtn3 = 'winbtn3';
var winbtn4 = 'winbtn4';
var winbtn5 = 'winbtn5';
var winMin = '210';
var IsCover = 0;
function Hidedivwindow(w,h){
resize_divwindow(w,h);
document.getElementById(iframeID).src='';
document.getElementById(dragWinID).style.visibility = 'hidden';
document.getElementById(coverDivID).style.visibility = 'hidden';
}
function opendivwindow(url,w,h,Cover,title){
resize_divwindow(w,h);
document.getElementById(iframeID).src=url;
this.IsCover = Cover;
myload_divwindow();
document.getElementById(dragWinID).style.display = 'block';
document.getElementById(titleID).innerHTML = title;
document.getElementById(titleID).title = title;
}
function catchdivwindow(e){
if (document.getElementById(flyTailerID).width != "100%" && document.getElementById(flyTailerID).width != winMin) {
bIsCatchFlyBar = true;
var x=event.x+document.body.scrollLeft;
var y=event.y+document.body.scrollTop;
dragClickX=x-document.getElementById(dragWinID).style.pixelLeft;
dragClickY=y-document.getElementById(dragWinID).style.pixelTop;
document.getElementById(dragWinID).setCapture();
document.onmousemove = movedivwindow;
}
}
function releasedivwindow(e){
bIsCatchFlyBar = false;
document.getElementById(dragWinID).releaseCapture();
document.onmousemove = null;
document.getElementById(iframeID).style.visibility = 'visible';
outside();
}
function movedivwindow(e){
if(bIsCatchFlyBar){
if(document.getElementById(iframeID).style.visibility != 'hidden')
{
document.getElementById(iframeID).style.visibility = 'hidden';
}
document.getElementById(dragWinID).style.left = event.x+document.body.scrollLeft-dragClickX;
document.getElementById(dragWinID).style.top = event.y+document.body.scrollTop-dragClickY;
}
}
function myload_divwindow(){
//document.getElementById(dragWinID).style.top=document.body.scrollTop+30;
if(IsCover == '1'){
document.getElementById(coverDivID).style.top = document.body.scrollTop;
document.getElementById(coverDivID).style.left = document.body.scrollLeft;
document.getElementById(coverDivID).style.visibility = 'visible';
}
if(document.body.offsetHeight > document.getElementById(dragWinID).clientHeight){
document.getElementById(dragWinID).style.top = (document.body.offsetHeight-document.getElementById(dragWinID).clientHeight)/2 + document.body.scrollTop;
}
else
{
document.getElementById(dragWinID).style.top = 0;
}
document.getElementById(dragWinID).style.width = '';
document.getElementById(dragWinID).style.left = (document.body.offsetWidth-document.getElementById(dragWinID).clientWidth)/2 + document.body.scrollLeft;
}
function resize_divwindow(w,h){
if(document.getElementById(flyTailerID).width == '100%' || document.getElementById(flyTailerID).width == winMin){
document.getElementById(dragWinID).style.height = '';
document.getElementById(flyTailerID).width = '100%';
max_divwindow(w,h);
}
}
//window.onresize = myload_divwindow();
//window.onscroll = myload_divwindow();
function outside(){
n1 = (document.getElementById(dragWinID).style.left).indexOf("px")
n2 = (document.getElementById(dragWinID).style.top).indexOf("px")
str1 = document.getElementById(dragWinID).style.left;
str2 = document.getElementById(dragWinID).style.top;
if(str1.substring(0,n1)-document.body.scrollLeft > (document.body.offsetWidth-30)){
document.getElementById(dragWinID).style.left = (document.body.offsetWidth-30) + document.body.scrollLeft;
}
if(str1.substring(0,n1)-document.body.scrollLeft < 20-document.getElementById(dragWinID).clientWidth){
document.getElementById(dragWinID).style.left = 20-document.getElementById(dragWinID).clientWidth + document.body.scrollLeft;
}
if(str2.substring(0,n2)-document.body.scrollTop > (document.body.offsetHeight-30)){
document.getElementById(dragWinID).style.top = document.body.offsetHeight-30 + document.body.scrollTop;
}
if(str2.substring(0,n2)-document.body.scrollTop < 20-document.getElementById(dragWinID).clientHeight){
document.getElementById(dragWinID).style.top = 20-document.getElementById(dragWinID).clientHeight + document.body.scrollTop;
}
}
//最小化;
function min_divwindow(w,h)
{
if (document.getElementById(flyTailerTrID).style.display == 'none'){
document.getElementById(flyTailerTrID).style.display = 'block';
document.getElementById(flyTailerID).width = w;
document.getElementById(flyTailerID).height = h;
document.getElementById(dragWinID).className = 'Shadow'
document.getElementById(winbtn1).style.display = '';
document.getElementById(winbtn2).style.display = 'none';
document.getElementById(winbtn3).style.display = '';
document.getElementById(winbtn4).style.display = 'none';
myload_divwindow();
}
else{
document.getElementById(flyTailerTrID).style.display = 'none';
document.getElementById(flyTailerID).width = winMin;
document.getElementById(flyTailerID).height = '';
document.getElementById(dragWinID).style.height = '';
document.getElementById(dragWinID).style.width = '';
document.getElementById(dragWinID).style.left = '1px';
document.getElementById(dragWinID).style.top = '1px';
document.getElementById(dragWinID).className = '';
document.getElementById(winbtn1).style.display = 'none';
document.getElementById(winbtn2).style.display = '';
document.getElementById(winbtn3).style.display = '';
document.getElementById(winbtn4).style.display = 'none';
document.getElementById(coverDivID).style.visibility = 'hidden';
fix_divwindow();
}
}
//最大化;
function max_divwindow(w,h)
{
document.getElementById(flyTailerTrID).style.display = 'block';
document.getElementById(winbtn1).style.display = '';
document.getElementById(winbtn2).style.display = 'none';
if (document.getElementById(flyTailerID).width == '100%'){
document.getElementById(dragWinID).style.height = '';
document.getElementById(dragWinID).className = 'Shadow';
document.getElementById(winbtn3).style.display = '';
document.getElementById(winbtn4).style.display = 'none';
document.getElementById(flyTailerID).width = w;
document.getElementById(flyTailerID).height = h;
myload_divwindow();
}
else{
document.getElementById(dragWinID).style.left = '0px';
document.getElementById(dragWinID).style.top = '0px';
document.getElementById(dragWinID).style.width = '100%';
document.getElementById(dragWinID).style.height = '100%';
document.getElementById(dragWinID).className = '';
document.getElementById(winbtn3).style.display = 'none';
document.getElementById(winbtn4).style.display = '';
document.getElementById(flyTailerID).width = '100%';
document.getElementById(flyTailerID).height = '100%';
fix_divwindow();
}
}
//当窗口最小化时，窗口永远居底
function stat(){
var a = pageYOffset+window.innerHeight-document.getElementById(dragWinID).document.height-0;
document.getElementById(dragWinID).top = a;
setTimeout('stat()',2);
}
function fix_divwindow(){
nome=navigator.appName;
if(nome=='Netscape'){
if(document.getElementById(dragWinID).style.visibility == 'visible'){
outside();
if(IsCover == '1' && document.getElementById(coverDivID).style.visibility == 'visible'){
document.getElementById(coverDivID).style.top = pageYOffset;
document.getElementById(coverDivID).style.left = pageXOffset;
}
if(document.getElementById(flyTailerID).width == winMin || document.getElementById(flyTailerID).width == '100%'){
stat();
}
}
}
else{
if(document.getElementById(dragWinID).style.visibility == 'visible'){
outside();
if(IsCover == '1' && document.getElementById(coverDivID).style.visibility == 'visible'){
document.getElementById(coverDivID).style.top = document.body.scrollTop;
document.getElementById(coverDivID).style.left = document.body.scrollLeft;
}
if(document.getElementById(flyTailerID).width == winMin || document.getElementById(flyTailerID).width == '100%'){
var a=document.body.scrollTop+document.body.clientHeight-document.getElementById(dragWinID).offsetHeight;
var b=document.body.scrollLeft;
document.getElementById(dragWinID).style.top = a;
if (b != 0){
document.getElementById(dragWinID).style.width = document.getElementById(dragWinID).offsetWidth;
}
else{
document.getElementById(dragWinID).style.width = '';
}
document.getElementById(dragWinID).style.left = b;
}
}
}
}
相关阅读 更多 +
