应用于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;
}
}
}
}

 

 

转载于:https://www.cnblogs.com/sheme/archive/2010/10/13/1850488.html