首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 培训 数据库 书店 程序员
中国软件网
欢迎您:游客 | 登录 注册 帮助
  • [向梅花雪提问]关于window.createPopup的两个问题 [已结贴,结贴人:CITICRC]
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 13:30:37 楼主
    由于IE6+SP1已经把full   screen后在resizeTo的BUG给封了,因此似乎做完全无边框的页面只能用window.createPopup来建窗口了,因为是要脱离于原页面的,也只能用window.createPopup了.但window.createPopup有两个问题不知道如何解决 
    问题一,如果在用window.createPopup建立的窗口中把自己hide掉,是hide不是close. 
                我想实现在鼠标离开这个页面的时候页面自动隐藏. 
    问题二,使用   var   oPage   =   window.createPopup; 
                          var   oBody   =   oPage.document.body; 
                          cHtml   =   "  <html> \n "; 
                          cHtml   +=   "    <head> \n "; 
                          cHtml   +=   "............ "; 
                          cHtml   +=   "    </head> \n "; 
                          cHtml   +=   "    <body> \n "; 
                          cHtml   +=   "............ "; 
                          cHtml   +=   "    </body> \n "; 
                          cHtml   +=   "  </html> \n "; 
                          oBody.innerHTML   =   cHtml; 
                          oBody.show(........); 
                  的方法建立窗口. 
                  但似乎 '  <style   type= "text/css "> '的内容加在cHtml的  <head> 部分不起作用,要使样式起作用,必须在  <body> 部分的标签里面使用style= " "这样的属性才起作用.那么这样一来,如何设置象a:link这样的伪类样式呢?
    100  修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 13:38:441楼 得分:30
    1、你可以指定POPUP里的body对象的 onmouseout 事件里隐藏。(不过你在这个事件里加上一个延迟处理,要判断一个是不是真的离开了)
    2、你可以使用document.createElement("LINK") 导入样式表文件,也可以使用 document.createStyleSheet() 方式创建或者导入样式

    POPUP你可以认为是已经存在 <head> <body>对象的框体,你只管往里面注入内容
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 14:20:012楼 得分:70
    抢分来了!

    HTML code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript"> <!-- //popup窗体 开始------------------------------------------------------------------- var oPopup, oPopupBody, oPopTimer function popInit(){ if (window.document.all){ oPopup = window.createPopup() oPopupBody = oPopup.document.body; oPopupBody.style.background="#000" oPopupBody.style.fontSize="12px" oPopupBody.style.textAlign="center" oPopupBody.style.padding="2px 2px 0px 2px" var s = oPopup.document.createStyleSheet(); s.addRule ('a:link','color:red;') s.addRule ('a:visted','color:red;') s.addRule ('a:hover','color:gold;') oPopupBody.attachEvent('onmouseout',hidePop) oPopupBody.attachEvent('onmouseover',clrPopTimer) } } function showPop(){ if (window.document.all){ var xp = 200, yp = 100, ww = 180, wh = 50, txt = '<div><a href="">sdfsdfsggggg</a></div>' oPopupBody.innerHTML = txt oPopup.show( xp, yp, ww, wh ) oPopupBody.innerHTML=txt oPopup.show(xp,yp,ww,wh) } } function hidePop(){ if (window.document.all) if (oPopup.isOpen) oPopTimer = setTimeout("oPopup.hide()",1000) } function clrPopTimer(){ clearTimeout(oPopTimer) } //popup窗体 结束------------------------------------------------------------------- //--> </script> </head> <body> <script type="text/javascript"> <!-- popInit() showPop() //--> </script> </body> </html>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 16:17:423楼 得分:0
    样式表可以了,不过隐藏似乎还是不对,document的onmouseout事件一设置,则鼠标在窗口里移动也会消失,和时钟的设置没有关系,唯一就是时钟设慢一点,就消失的慢一点而已
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 16:25:074楼 得分:0
    鼠标在popup窗口里移动会消失?我测试过的不会啊!我设置的是1000ms
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 18:09:145楼 得分:0
    是啊,设置1000ms,则鼠标放上面1000ms以后,POP就自己关掉了,设置2000ms,则2000ms后自己关掉了
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-14 09:24:166楼 得分:0
    首先,你是不是用的我写的代码?还是你参考我的在自己的页面做修改?

    其次,鼠标放在哪个上面,pop会自己关掉,是母窗口,还是pop窗口?

    最后解释下我的思路,
    oPopupBody.attachEvent('onmouseout',hidePop)
    鼠标移出窗口,则执行hidepop,并在hidepop里设置延迟。

    oPopupBody.attachEvent('onmouseover',clrPopTimer)
    鼠标移入窗口,则清楚hidepop里的时钟。

    你觉得这个逻辑有什么问题?

    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-17 16:19:087楼 得分:0
    参考你的代码写的,不过没怎么改,基本就是你的原代码
    鼠标放在Pop上会自己关掉是指pop窗口
    我觉得你的逻辑没有问题,但我不清楚的是有没有可能document的onmouseover事件被document里面的某些东西的事件替代掉了,就是说有没可能,document的onmouseover事件只指document本身,当整个document的页面都已经被其它的东西替代的时候,onmouseover会不会已经不执行了?
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-17 16:23:088楼 得分:0
    刚才还没说明白,就是说,我的document里面没有一块空地是没东西的,首先就用了一个height/width都是100%的table做了完整的布局,然后table里面有一堆东西这样,那有没有可能鼠标移到这上面的时候,变成是移到TD上面而认为移出document了呢?我现在的状况似乎是那个clrPopTimer没起作用了
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-19 13:57:029楼 得分:0
    把代码贴上来,我帮你找错。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-20 08:24:2410楼 得分:0
    var New_CW=window.createPopup(); 
      var New_CWTimer;
      New_CW.document.createStyleSheet("../style/popup_a.css"); 
      function ToolTip_Show(cMessage){
           var CW_width = 205;
           var CW_height = 110;
       var cBodyTop = event.screenY;
       var cScreenHeight = screen.height;
       if(cBodyTop + 110 > cScreenHeight){
              var CW_top = cScreenHeight - 110;
       }else{
          var CW_top = cBodyTop;
       }
       var cBodyLeft = window.screenLeft;
       var cScreenWidth = screen.width;
       var cDocuWidth = document.body.offsetWidth;
       if(cBodyLeft >= 205){
              var CW_left = cBodyLeft - 205;
       }else{
          if(cBodyLeft + cDocuWidth + 205  <= cScreenWidth){
              var CW_left = cBodyLeft + cDocuWidth;
              }else{
          var CW_left = cScreenWidth - 205;
      }    
       }
           
           var CW_Body = New_CW.document.body;
           cHtml = ' <html>';
           cHtml += ' <head>';
           cHtml += ' <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />';
           cHtml += ' <title>提示信息 </title>';
           cHtml += ' <style type="text/css">';
           cHtml += ' <!--';
           cHtml += 'a {';
           cHtml += ' font-family: "宋体";';
           cHtml += ' font-size: 12px;';
           cHtml += '}';
           cHtml += 'a:link {';
           cHtml += ' color: #003D92;';
           cHtml += '}';
           cHtml += 'a:visited {';
           cHtml += ' color: #003D92;';
           cHtml += '}';
           cHtml += 'a:hover {';
           cHtml += ' color: #0000FF;';
           cHtml += '}';
           cHtml += 'a:active {';
           cHtml += ' color: #003D92;';
           cHtml += '}';
           cHtml += '-->';
           cHtml += ' </style>';
           cHtml += ' </head>';
           cHtml += '';
           cHtml += ' <body style="margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;" >';
           cHtml += '    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="font-family: \'宋体\';font-size: 12px;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #3A5F90;border-right-color: #3A5F90;border-bottom-color: #32598D;border-left-color: #3A5F90;">';
           cHtml += '       <tr>';
           cHtml += '         <td height="1" bgcolor="#98c1ef" unselectable="on" style="cursor:default;"> </td>';
           cHtml += '       </tr>';
           cHtml += '       <tr>';
           cHtml += '         <td bgcolor="#EBF2F8" unselectable="on" style="cursor:default;">';
           cHtml += '        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: \'宋体\';font-size: 12px;color: #43443F;border-top-width: 1px;border-right-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-left-style: solid;border-top-color: #98C1EF;border-right-color: #E8F0F6;border-left-color: #D8E2EC;">';
           cHtml += '             <tr>';
           cHtml += '               <td id="TOOLTIP_CONT" unselectable="on" style="cursor:default;padding-top:5px;padding-left:5px;padding-right:25px;line-height: 20px;">';
       cHtml += cMessage + ' </td>';
           cHtml += '             </tr>';
           cHtml += '           </table>';
           cHtml += '      </td>';
           cHtml += '       </tr>';
           cHtml += '       <tr>';
           cHtml += '         <td height="35" id="TOOLTIP_TD_CONFERT" style="filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=\'#EBF2F8\', endColorStr=\'#C7D3DF\', gradientType=\'0\');">';
           cHtml += '        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" id="TOOLTIP_TABLE_CONFERT3" style="border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-right-color: #E8F0F6;border-bottom-color: #E6ECF3;border-left-color: #D8E2EC;font-family: \'宋体\';font-size: 12px;">';
           cHtml += '          <tr>';
           cHtml += '               <td height="13" colspan="2" unselectable="on" style="cursor:default;"> </td>';
           cHtml += '             </tr>';
           cHtml += '             <tr>';
           cHtml += '               <td height="1" colspan="2"  unselectable="on" style="cursor:default;background-color:#B6C1CC;">  </td>';
           cHtml += '             </tr>';
           cHtml += '        <tr>';
           cHtml += '               <td height="1" colspan="2"  unselectable="on" style="cursor:default;background-color:#EDF1F5;">  </td>';
           cHtml += '             </tr>';
           cHtml += '        <tr>';
           cHtml += '               <td unselectable="on" style="cursor:default;">&nbsp; </td>';
           cHtml += '               <td width="65" height="18" unselectable="on" style="cursor:default;"> <a id="cFixDetail" href="#">详细情况 </a> </td>';
           cHtml += '        </tr>';
           cHtml += '           </table>';
           cHtml += '      </td>';
           cHtml += '       </tr>';
           cHtml += '     </table>';
           cHtml += ' </body>';
           cHtml += ' </html>';
       CW_Body.innerHTML = cHtml;        
       CW_Body.attachEvent("oncontextmenu",new Function("return false;"));
       CW_Body.attachEvent("onmouseout",ToolTip_Hidden2);
       CW_Body.attachEvent("onmouseover",ToolTip_ClrPopTimer);
           New_CW.show(CW_left, CW_top, CW_width, CW_height);
       //window.alert(CW_Body.innerTHML);
       }  
      function ToolTip_Hidden(){
     New_CW.hide();
      }
      function ToolTip_Hidden2(){
         if(window.document.all){
         if(New_CW.isOpen){
         New_CWTimer = setTimeout("New_CW.hide()",1000);
     }
      }
      }
      function ToolTip_ClrPopTimer(){
          clearTimeout(New_CWTimer);
      }
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-21 15:56:5011楼 得分:0
    把过程细化吧,不要把所有代码写一个函数里。
    把creatPopup放进 popInit()函数,同时在这个函数里,初始popup 的样式及  事件(这个改动解决了你的问题)
    在ToolTip_Show函数里只用处理popup的坐标及内容,在这个函数里还有事件坐标的处理,如果不通过事件直接show你这个函数没用了,因为里面有event会报错。建议对此问题稍作处理。
    先调用popInit初始化,再调用ToolTip_Show,测试下吧,没问题了。

    HTML code
    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> @import url("http://style.china.alibaba.com/css/blog/alicn_bb.css?t=0708241"); </style> </head> <body> <script type="text/javascript"> <!-- var New_CW, CW_Body, New_CWTimer function popInit(){ if (window.document.all){ New_CW=window.createPopup(); New_CW.document.createStyleSheet("../style/popup_a.css"); CW_Body = New_CW.document.body; CW_Body.attachEvent("oncontextmenu",new Function("return false;")); CW_Body.attachEvent("onmouseout",ToolTip_Hidden2); CW_Body.attachEvent("onmouseover",ToolTip_ClrPopTimer); } } function ToolTip_Show(cMessage){ var CW_width = 205; var CW_height = 110; var cBodyTop = event.screenY; var cScreenHeight = screen.height; if(cBodyTop + 110 > cScreenHeight){ var CW_top = cScreenHeight - 110; }else{ var CW_top = cBodyTop; } var cBodyLeft = window.screenLeft; var cScreenWidth = screen.width; var cDocuWidth = document.body.offsetWidth; if(cBodyLeft >= 205){ var CW_left = cBodyLeft - 205; }else{ if(cBodyLeft + cDocuWidth + 205 <= cScreenWidth){ var CW_left = cBodyLeft + cDocuWidth; }else{ var CW_left = cScreenWidth - 205; } } cHtml =' <html>'; cHtml +=' <head>'; cHtml +=' <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />'; cHtml +=' <title> 提示信息 </title>'; cHtml +=' <style type="text/css">'; cHtml +=' <!--'; cHtml +='a {'; cHtml +=' font-family:"宋体";'; cHtml +=' font-size: 12px;'; cHtml +='}'; cHtml +='a:link {'; cHtml +=' color: #003D92;'; cHtml +='}'; cHtml +='a:visited {'; cHtml +=' color: #003D92;'; cHtml +='}'; cHtml +='a:hover {'; cHtml +=' color: #0000FF;'; cHtml +='}'; cHtml +='a:active {'; cHtml +=' color: #003D92;'; cHtml +='}'; cHtml +='-->'; cHtml +=' </style>'; cHtml +=' </head>'; cHtml +=''; cHtml +=' <body style="margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;" >'; cHtml +=' <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="font-family: \'宋体\';font-size: 12px;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #3A5F90;border-right-color: #3A5F90;border-bottom-color: #32598D;border-left-color: #3A5F90;">'; cHtml +=' <tr>'; cHtml +=' <td height="1" bgcolor="#98c1ef" unselectable="on" style="cursor:default;"> </td>'; cHtml +=' </tr>'; cHtml +=' <tr>'; cHtml +=' <td bgcolor="#EBF2F8" unselectable="on" style="cursor:default;">'; cHtml +=' <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: \'宋体\';font-size: 12px;color: #43443F;border-top-width: 1px;border-right-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-left-style: solid;border-top-color: #98C1EF;border-right-color: #E8F0F6;border-left-color: #D8E2EC;">'; cHtml +=' <tr>'; cHtml +=' <td id="TOOLTIP_CONT" unselectable="on" style="cursor:default;padding-top:5px;padding-left:5px;padding-right:25px;line-height: 20px;">'; cHtml += cMessage +' </td>'; cHtml +=' </tr>'; cHtml +=' </table>'; cHtml +=' </td>'; cHtml +=' </tr>'; cHtml +=' <tr>'; cHtml +=' <td height="35" id="TOOLTIP_TD_CONFERT" style="filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=\'#EBF2F8\', endColorStr=\'#C7D3DF\', gradientType=\'0\');">'; cHtml +=' <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" id="TOOLTIP_TABLE_CONFERT3" style="border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-right-color: #E8F0F6;border-bottom-color: #E6ECF3;border-left-color: #D8E2EC;font-family: \'宋体\';font-size: 12px;">'; cHtml +=' <tr>'; cHtml +=' <td height="13" colspan="2" unselectable="on" style="cursor:default;"> </td>'; cHtml +=' </tr>'; cHtml +=' <tr>'; cHtml +=' <td height="1" colspan="2" unselectable="on" style="cursor:default;background-color:#B6C1CC;"> </td>'; cHtml +=' </tr>'; cHtml +=' <tr>'; cHtml +=' <td height="1" colspan="2" unselectable="on" style="cursor:default;background-color:#EDF1F5;"> </td>'; cHtml +=' </tr>'; cHtml +=' <tr>'; cHtml +=' <td unselectable="on" style="cursor:default;"> &nbsp; </td>'; cHtml +=' <td width="65" height="18" unselectable="on" style="cursor:default;"> <a id="cFixDetail" href="#"> 详细情况 </a> </td>'; cHtml +=' </tr>'; cHtml +=' </table>'; cHtml +=' </td>'; cHtml +=' </tr>'; cHtml +=' </table>'; cHtml +=' </body>'; cHtml +=' </html>'; CW_Body.innerHTML = cHtml; New_CW.show(CW_left, CW_top, CW_width, CW_height); //window.alert(CW_Body.innerTHML); } function ToolTip_Hidden(){ New_CW.hide(); } function ToolTip_Hidden2(){ if(window.document.all){ if(New_CW.isOpen){ New_CWTimer = setTimeout("New_CW.hide()",1000); } } } function ToolTip_ClrPopTimer(){ clearTimeout(New_CWTimer); } popInit() //--> </script> <input type="button" value="click me" onclick="ToolTip_Show('dddddddd')"/> </body> </html>


    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-29 01:20:4912楼 得分:0
    问题解决了,谢谢.不过这两种做法到底有什么区别呢?为什么放在一起就不行了呢?EVENT报错是怎么回事?我这里似乎没见到有报错信息,这个是什么东西导致的冲突?
    修改 删除 举报 引用 回复