应用于Domino的Javascript浮动的提示窗口

效果图:

 

先在页面插入如下代码:

 

 

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